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-g”显示/隐藏何时单击“item-w”，但仅限于特定“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是子元素，您可以使用find或children方法。另请注意，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');
   });
});

如果你感到困惑，我就成了一个小伙伴。

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

如何使.toggle效果只有1个元素可能有相同的类

3 个答案: