Question

当我选中框

时，我想要淡出切换

<div id="single-app">
    <div class="checkbox>">
        <label><input type="checkbox" id="check">AAAA</label>
    </div>
    <img src="bbbb" height="140" width="140">
    <div id="app-content">
        <label>Content
            <textarea class="form-control" rows="5"></textarea>
        </label>
    </div>
</div>
<div id="single-app">
    <div class="checkbox>">
        <label><input type="checkbox" id="check">BBB</label>
    </div>
    <img src="bbbb" height="140" width="140">
    <div id="app-content">
        <label>Content
            <textarea class="form-control" rows="5"></textarea>
        </label>
    </div>
</div>

和jquery

$(document).ready(function(){
    $('#app-content').hide();
    $('#check').click(function(){
        $('#app-content').fadeToggle();
    })
});

但它只有第一个div，下一个div没有来自jquery的效果

Answer 1

首先，不要使用多个ID，每个元素的id必须是唯一的。您可以将其替换为class names

然后你可以设置这样的函数：

$(document).ready(function(){
  $('.app-content').hide();
  $('.single-app').each(function(){
      var $this = $(this);
      $('.check',this).click(function(){
      $this.find('.app-content').fadeToggle();
      })
  })
});

查看此演示 http://jsfiddle.net/m7XtE/5/

Answer 2

两个元素不能具有相同的ID;两个元素可以具有相同的类。

您的代码应如下所示：

<div class="item">
    <label><input type="checkbox" class="checkbox">AAAA</label>

    <img src="bbbb" height="140" width="140">
    <div class="app-content">
        <label>Content<textarea class="form-control" rows="5"></textarea></label>
    </div>
</div>


 <script type="text/javascript">
     //this loops through each item and finds the children
     $(".item").each(function(){
         var $this = $(this);
         var checkbox = $this.children(".checkbox");
         var appContent = $this.children(".app-content").hide();

         checkbox.change(function(){
             appContent.fadeToggle();
         });
     });
 </script>

Fadetoggle在下一个div不起作用

2 个答案: