logo标签列表

JavaScript隐藏/显示<div>

javascriptjqueryhtmlcss
3
我希望了解为什么我的代码不能工作，以更好地理解问题所在。
这是我第一次尝试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代码中还是有其他我仍然不知道的东西。
附注：我在我的JavaScript文件顶部添加了“/ global $，jQuery，alert /”，因为否则编译器会给我“'$'在定义之前使用。$('.title')click(function(){”错误，但我不确定这是否是正确的解决方案。
非常感谢大家的帮助，真的非常感激！ - Solaire
2个回答
2

您的描述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>
1
主要问题在于<script href="description.js"></script>应该是<script src="description.js"></script>-使用src而不是href。
此外，你的.description不在.title内部，因此它无法找到相关的描述并且它们将保持隐藏状态。
所以你需要获取下一个元素。
/*global $, jQuery, alert*/

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

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

$(document).ready(main);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接