隐藏/显示 <div> 用JavaScript

Question

I would like to understand why MY code doesn't work, to understand better where is the problem. 我想了解为什么我的代码不起作用，更好地了解问题在哪里。

This is my first JavaScript try, and I simply want to show/hide some divs when clicking on another div. 这是我的第一次JavaScript尝试，我只想在点击另一个div时显示/隐藏一些div。 Specifically, with the following JavaScript code, I would like to hide all the divs (in case a div was already shown), and then show the div I'd like to show. 具体来说，使用以下JavaScript代码，我想隐藏所有div（如果已经显示div），然后显示我想要显示的div。

These are the files: 这些是文件：

index.html 的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 的main.css

body {
    font-family: Helvetica-light;
}

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

.description {
    display: none;
}

description.js description.js

/*global $, jQuery, alert*/

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

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

$(document).ready(main);

The problem is that when I click on my .title divs, nothing happen, and I don't know if the problem is in my JavaScript code or there's something else I still don't know. 问题是，当我点击我的.title div时，什么都没发生，我不知道问题是在我的JavaScript代码中还是其他我还不知道的东西。

PS: I added the "/ global $, jQuery, alert /" at the top of my JavaScript file, because otherwise the compiler gives me the " '$' was used before it was defined. $('.title')click(function (){ " error, but I don't really know if it is the right solution. PS：我在我的JavaScript文件的顶部添加了“/ global $，jQuery，alert /”，因为否则编译器会在定义之前使用“'$'。$（'。title'）click（ function（）{“错误，但我真的不知道它是否是正确的解决方案。

Answer 1

Your description divs are no children of your title divs, so it won't work. 您的描述div不是您的标题div的子项，因此它不起作用。 I've altered the code a little bit as you can see here working 我已经改变了一点代码，你可以看到这里工作

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

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

HTML: 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>

Also, you have a error here: 此外，您在此处有错误：

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

this should be 这应该是

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

Answer 2

The main issue is that <script href="description.js"></script> should be <script src="description.js"></script> - src not href . 主要问题是<script href="description.js"></script>应该是<script src="description.js"></script> - src not href 。

Also your .description s are not inside your .title s, so it won't find the related description and they will all stay hidden. 你的.description也不在你的.title里面，所以它找不到相关的描述，它们都会隐藏起来。

So you need to get the next element instead: 所以你需要获得下一个元素：

/*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