Question

我正在尝试构建一个jQuery，当单击div #toggle时，div内部的span将显示，当设置为切换模式时，但当我使用两个或更多div块时，它只显示第一个span。请帮忙。

＆＃13;

$(document).ready(function() {
  $("div#toggle").click(function() {
    $("#show").toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='toggle'>this clicked
  <span id='show'><p>Show this</p></span>
</div>
<div id='toggle'>
  <span id='show'><p>fhslkjklsfjl</p></span>
</div>

＆＃13;

Answer 1

试试这个： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id='toggle'>this clicked
      <span id='show'><p>Show this</p></span>
    </div>
    <div id='toggle'>2 nd button
      <span id='show'><p>fhslkjklsfjl</p></span>
    </div>

       $("div#toggle").click(function(e) {
  if (e.target !== this)
    return;
    $(this).find("#show").toggle();
  });

https://jsfiddle.net/9oh6yqfn/9/

Answer 2

您不能使用相同的ID。 ID应该是唯一的。

尝试上课：

  $(".toggle").click(function(e) {
  if (e.target !== this)
    return;
    $(this).find("#show").toggle();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toggle'>this clicked
  <span id='show'><p>Show this</p></span>
</div>
<div class='toggle'>2 nd button
  <span id='show'><p>fhslkjklsfjl</p></span>
</div>

Answer 3

两个跨度都不能具有相同的ID。尝试使用不同的id作为span。例如：

＆＃13;

$(document).ready(function() {
  $("div#toggle").click(function() {
    $("#show").toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='toggle'>this clicked
  <span id='show'><p>Show this</p></span>
</div>
<div id='toggle'>
  <span id='show1'><p>fhslkjklsfjl</p></span>
</div>

＆＃13;

jquery单击，切换一个或多个div块

3 个答案: