鍍金池/ 問答/HTML5  HTML/ JQ 如何在多個(gè)同樣 class 中操作當(dāng)前元素并執(zhí)行事件？

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)擊查看問題代碼

3. 思路

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

$(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