JQ 如何在多个同样 class 中操作当前元素并执行事件？

Question

1. 目的

当我点击 item-1 的 head 时， item-1 的 head 添加 class="in" ；

同时 item-1 的 body 添加 class="open" 。

当我点击 item-2 的 head 时，重复执行上述操作。
同时 item-1 的 head 取消 class="in" ；
item-1 的 body 取消 class="open" 。

当我点击 item-* 的 head 时，重复执行上述操作。
同时 item-x 的 head 取消 class="in" ；
item-x 的 body 取消 class="open" 。

...

2. 代码

<ul>
    <li class="item-1">
        <div class="head in"></div>
        <div class="body"></div>
    </li>
    <li class="item-2">
        <div class="head"></div>
        <div class="body"></div>
    </li>
    ...
</ul>

点击查看问题代码

3. 思路

以下代码为个人思路，但是经验证会存在问题。

$(function(){

    $(".panel-heading").click(function(){

        $(".panel").each(function(){

            if ( $(this).children("div.in") ) {
                
                // 当 class="in" 执行事件
            }
            return false;

        });
    });
    
});

Answer 1

$('ul').on('click', '.head', function(){
    var oldItem = $('.item'),
        curItem = $(this).parent('.item');
    oldItem.children('.head').removeClass('in');
    oldItem.children('.body').removeClass('open');
    curItem.children('.head').addClass('in');
    curItem.children('.body').addClass('open');
});

逻辑大概其就是这样吧，HTML结构需要改下，.item-x这样的类统一改成.item

Answer 2

hasClass()

Answer 3

@熊猫桑 方法不错。先这类类似选项卡的模块，使用用事件委托是很好的。

Answer 4

改了一下

$('ul').on('click', '.head', function(){
  var oldItem = $('li'),
  curItem = $(this).parent('li');
  oldItem.children('.head').removeClass('in');
  oldItem.children('.body').removeClass('open');
  curItem.children('.head').addClass('in');
  curItem.children('.body').addClass('open');
});