jquery - 当可能具有相同的类时，如何使 .toggle 仅对 1 个元素产生影响

Question

所以我有以下标记

<div class="item-w">
    <div class="item-g">
        <div class="item-name">Aircraft Docs (ARROW)</div>
        <div class="item-action">Check</div>
    </div>
    <div class="item-name">Aircraft Docs (ARROW)</div>
    <div class="item-action">Check</div>
</div>    
<div class="item-w">
    <div class="item-g">
        <div class="item-name">Weight &#38; Balance</div>
        <div class="item-action">Check</div>
    </div>
    <div class="item-name">Weight &#38; Balance</div>
    <div class="item-action">Check</div>
</div>

而且我想在单击“item-w”时显示/隐藏“item-g”，但仅适用于该特定“item-w”div中的“item-g”。

我正在使用的 jQuery 如下：

<script type="text/javascript">
    $(document).ready(function() {
        $(".item-g").hide();
    });


    $(function()
      {
      $(".item-w").toggle(function()
                          { // first click shows green
                          $(".item-g").fadeIn('fast');
                          },
                          function()
                          { // next click hides green
                          $(".item-g").fadeOut('fast');
                          });
      });
</script>

我也尝试了以下方法，但无济于事：

<script type="text/javascript">
    $(document).ready(function() {
        $(".item-g").hide();
    });


    $(function()
      {
      $(".item-w").toggle(function()
                          { // first click shows green
                          $(this).next(".item-g").fadeIn('fast');
                          },
                          function()
                          { // next click hides green
                          $(this).next(".item-g").fadeOut('fast');
                          });
      });
</script>

Answer 1

next选择被选元素的直接下一个兄弟，但是在你的标记.item-g中是一个子元素，你可以使用findorchildren方法。另请注意，toggle不推荐使用方法，您可以使用click和fadeToggle方法来代替。

$(".item-w").click(function() { 
    $(this).find(".item-g").fadeToggle('fast');
    // $(".item-g", this).fadeToggle('fast');
});

Answer 2

使用以下内容：

    $(this).children(".item-g").animation_function();

所以只有 的子元素this受到影响。

Answer 3

用这个：

$(function()
{
   $(".item-w").toggle(function()
   { // first click shows green
      $(this).find(".item-g").fadeIn('fast');
   },
   function()
   { // next click hides green
      $(this).find(".item-g").fadeOut('fast');
   });
});

如果你感到困惑，我做了一个 jsfiddle。

http://jsfiddle.net/MatthewDavis/WnB62/