Question

我想像这样制作一个HTML元素引用

<html>        X
- description -

<head>        X
- description -

<body>        X
- description -

默认情况下隐藏元素的描述，所以当我点击＆＃34; X＆＃34;或者包含该元素描述的DIV，当我再次点击它时，描述会显示或隐藏。

这是我的HTML代码：

<h1>HTML Reference</h1>
  <div id="reference-list">
      <div class="list-element">&lt;html&gt;</div>
      <div class="element-desc">Here's go description</div>
      <div class="list-element">&lt;head&gt;</div>
      <div class="element-desc">Here's go description</div>
  </div>

我尝试使用jQuery，但我不知道如何选择包含该元素描述的特定div，因为所有div都有相同的类（否则我将为每个HTML元素创建100个类）。

我试过的是：

<script>
$(document).ready(function(){
    $(".list-element").click(function(){
        $(".element-desc").toggle();
    });
});
</script>

这不起作用，因为它显示/隐藏了网站上所有元素的描述。

Answer 1

如果那是你元素的正确位置，你可以使用.next()。

$(document).ready(function(){
    $(".list-element").click(function(){
        $(this).next().toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>HTML Reference</h1>
  <div id="reference-list">
      <div class="list-element">&lt;html&gt;</div>
      <div class="element-desc">Here's go description</div>
      <div class="list-element">&lt;head&gt;</div>
      <div class="element-desc">Here's go description</div>
  </div>

Answer 2

您正在使用$(".element-desc")选择器选择所有元素描述。试着这样做：

$(document).ready(function(){
    $(".list-element").click(function(){
        $(this).next().toggle();
    });
});

使用next选择下一个元素。基本上你想让你的选择器更具体，使用next是如何做的一个例子

使用JavaScript

2 个答案: