Question

我的HTML中有一个<ul>列表，在其中的每个<li>内，我有一个ID为vid的元素。

使用jQuery，我想做到这一点，当我点击每个<li>的标题时，中的#vid元素 <li>（只是点击的一个将出现/消失。

我的代码切换#vid div有效，但它会影响所有#vid元素，而不仅仅是一个。

HTML：

<ul class="list">
    <li>
      <h3 class="title">First Title</h3>
      <p class="tags">tags, tags, tags</p>
      <div id="vid">
  Now you see me!
</div>
    </li>
    <li>
      <h3 class="title">Second Title</h3>
      <p class="tags">etc, etc, etc</p>
      <div id="vid">
  Now you see me!
      </div>
    </li>
</ul>

jQuery的：

var thisli = $('li', this);
  var thisvid = $('#vid', thisli);
  var clicks = 0;

  $('h3', this).click(function() {
    if(clicks % 2 === 0){
      $(thisvid, this).show();
      }else{
      $(thisvid, this).hide();
        }
    ++clicks;
});
  });

Answer 1

#ID应唯一

所以我在下面的代码中使用class="vid"。

jQuery(function($) {
  $("h3").click(function() {
    $(this).siblings(".vid").toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>
    <h3 class="title">First Title</h3>
    <p class="tags">tags, tags, tags</p>
    <div class="vid">
      Now you see me!
    </div>
  </li>
  <li>
    <h3 class="title">Second Title</h3>
    <p class="tags">etc, etc, etc</p>
    <div class="vid">
      Now you see me!
    </div>
  </li>
</ul>

从<li>（jQuery / javascript）中选择一个（此）项

1 个答案: