使用 JavaScript 隐藏/显示

Hiding/Showing <div> with JavaScript

本文关键字：显示 隐藏 JavaScript 使用      更新时间：2023-09-26
。

我想了解为什么我的代码不起作用，以便更好地了解问题出在哪里。

这是我第一次尝试 JavaScript，我只想在单击另一个div 时显示/隐藏一些div。 具体来说，使用以下 JavaScript 代码，我想隐藏所有div(以防已经显示了div(，然后显示我想显示的div。

这些是文件：

索引.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>

主.css

body {
    font-family: Helvetica-light;
}
.title {
    height: 25px;
    border-bottom: 1px solid #a0a0a0;
}
.description {
    display: none;
}

说明.js

/*global $, jQuery, alert*/
var main = function () {
    'use strict';
    $('.title').click(function () {
        $('.description').hide();
        $(this).children('.description').show();
    });
};
$(document).ready(main);

问题是，当我点击我的 .titlediv 时，什么也没发生，我不知道问题出在我的 JavaScript 代码中还是还有其他我仍然不知道的东西。

PS：我在JavaScript文件的顶部添加了"/global $，jQuery，alert/"，因为否则编译器会给我"$"在定义之前使用。$('.title'(click(function (({ " 错误，但我真的不知道它是否是正确的解决方案。

您的描述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>

主要问题是<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);
相关文章：