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代码中还是其他的东西我仍然没有知道。

P.S：我添加了＆＃34; / 全球$，jQuery，警告 /＆＃34;在我的JavaScript文件的顶部，因为否则编译器会给我＆＃34; ＆＃39; $＆＃39;在定义之前使用过。 $（＆＃39; .title＆＃39;）点击（function（）{＆＃34;错误，但我不知道这是否是正确的解决方案。

Answer 1

您的描述div不是您的标题div的子项，因此它不会起作用。我已尽可能地改变了代码see here working

$('.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而不是href。

此外，您的.description不在.title内，因此无法找到相关说明，并且它们都将保持隐藏状态。

所以你需要改为使用 next 元素：

/*global $, jQuery, alert*/

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

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

$(document).ready(main);

使用JavaScript隐藏/显示<div> </div>

2 个答案: