JQ 如何在多個(gè)同樣 class 中操作當(dāng)前元素并執(zhí)行事件？

1. 目的

當(dāng)我點(diǎn)擊 item-1 的 head 時(shí)， item-1 的 head 添加 class="in" ；

同時(shí) item-1 的 body 添加 class="open" 。

當(dāng)我點(diǎn)擊 item-2 的 head 時(shí)，重復(fù)執(zhí)行上述操作。
同時(shí) item-1 的 head 取消 class="in" ；
item-1 的 body 取消 class="open" 。

當(dāng)我點(diǎn)擊 item-* 的 head 時(shí)，重復(fù)執(zhí)行上述操作。
同時(shí) 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>

點(diǎn)擊查看問(wèn)題代碼

3. 思路

以下代碼為個(gè)人思路，但是經(jīng)驗(yàn)證會(huì)存在問(wèn)題。

$(function(){

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

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

            if ( $(this).children("div.in") ) {
                
                // 當(dāng) class="in" 執(zhí)行事件
            }
            return false;

        });
    });
    
});

回答

編輯回答

單眼皮

@熊貓桑方法不錯(cuò)。先這類類似選項(xiàng)卡的模塊，使用用事件委托是很好的。

2017年5月22日 15:11

編輯回答

萢萢糖

hasClass()

2018年7月4日 10:09

編輯回答

哚蕾咪

改了一下

$('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');
});

2018年4月20日 20:13

編輯回答

吢丕

$('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結(jié)構(gòu)需要改下，.item-x這樣的類統(tǒng)一改成.item

2017年10月8日 19:58