Select <li> 中的一项（这）项（jQuery/javascript）

Question

我的 HTML 中有一个 <ul> 列表，在每个 <li> 中，我有一个 ID 为 vid.[=23= 的元素]

对于 jQuery，我想这样当我单击每个 <li> 的标题时，that[=34= 中的 #vid 元素] <li>（只是被点击的那个）将 appear/disappear。

我切换 #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>