隱藏/顯示 <div> 用JavaScript

Question

我想了解為什么我的代碼不起作用，更好地了解問題在哪里。

這是我的第一次JavaScript嘗試，我只想在點擊另一個div時顯示/隱藏一些div。 具體來說，使用以下JavaScript代碼，我想隱藏所有div（如果已經顯示div），然后顯示我想要顯示的div。

這些是文件：

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript First Try</title>
        <link rel="stylesheet" type="text/css" href="main.css"/>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script href="description.js"></script>
    </head>

    <body>

        <div class="articles">
            <div class="title"><h3>Mario regala collana a Sandrone</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="title"><h3>Mario regala collana a Silvia.jpg</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>

            <div class="title"><h3>Mario regala collana a Cazzo</h3></div>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

    </body>
</html>

的main.css

body {
    font-family: Helvetica-light;
}

.title {
    height: 25px;
    border-bottom: 1px solid #a0a0a0;
}

.description {
    display: none;
}

description.js

/*global $, jQuery, alert*/

var main = function () {
    'use strict';
    $('.title').click(function () {
        $('.description').hide();

        $(this).children('.description').show();
    });
};

$(document).ready(main);

問題是，當我點擊我的.title div時，什么都沒發生，我不知道問題是在我的JavaScript代碼中還是其他我還不知道的東西。

PS：我在我的JavaScript文件的頂部添加了“/ global $，jQuery，alert /”，因為否則編譯器會在定義之前使用“'$'。$（'。title'）click（ function（）{“錯誤，但我真的不知道它是否是正確的解決方案。

Answer 1

您的描述div不是您的標題div的子項，因此它不起作用。 我已經改變了一點代碼，你可以看到這里工作

$('.title').click(function () {
    $('.description').hide();

   $(this).children('.description').show();
});

HTML：

        <div class="articles">
            <div class="title"><h3>Mario regala collana a Sandrone</h3> <!-- removed the closing </div> tag -->
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div></div> <!-- and added it here -->

            <div class="title"><h3>Mario regala collana a Silvia.jpg</h3>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div></div>

            <div class="title"><h3>Mario regala collana a Cazzo</h3>
            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
</div>

此外，您在此處有錯誤：

    <script href="description.js"></script>

這應該是

    <script src="description.js"></script>

Answer 2

主要問題是<script href="description.js"></script>應該是<script src="description.js"></script> - src not href 。

你的.description也不在你的.title里面，所以它找不到相關的描述，它們都會隱藏起來。

所以你需要獲得下一個元素：

/*global $, jQuery, alert*/

var main = function () {
    'use strict';
    $('.title').click(function () {
        $('.description').hide();

        $(this).next().show();
    });
};

$(document).ready(main);

隱藏/顯示 <div> 用JavaScript

問題描述

2 個解決方案

解決方案1
2 已采納 2014-12-19 00:25:42

解決方案2
1 2014-12-19 00:23:24

隱藏/顯示 <div> 用JavaScript

問題描述

2 個解決方案

解決方案1 2 已采納 2014-12-19 00:25:42

解決方案2 1 2014-12-19 00:23:24

解決方案1
2 已采納 2014-12-19 00:25:42

解決方案2
1 2014-12-19 00:23:24