javascript - 在同一级别的 div 上创建一个 toggleClass？

Question

当单击具有类名称“toggle-box”的同一级别 div 时，我试图在名为“open-arrow”的现有 div 类上切换类“closed-arrow”。

目前我有这个工作 - 但它会打开所有类名为“open-arrow”的 div。我只希望它在被点击的 div 上工作。

查看示例 fiddle :http://jsfiddle.net/6gZAY/

这是切换类“闭合箭头”的当前代码，如何修改代码以更改点击区域？

$( 'div' ).next( '.open-arrow' ).toggleClass('closed-arrow');

Answer 1

您可以使用 $(this) 获取对当前点击的 .togglelink anchor 的引用，也可以使用 .siblings() 仅定位点击 anchor 的同级 .open-arrow div，因此您可以:

$(this).siblings( '.open-arrow' ).toggleClass('closed-arrow');

代替:

$('div').next( '.open-arrow' ).toggleClass('closed-arrow');

更新 fiddle :http://jsfiddle.net/6gZAY/1/

---

根据您的评论，您可以使用:

var closedArrow = $(this).siblings( '.closed-arrow' );
$('.closed-arrow').not(closedArrow).removeClass( 'closed-arrow' )
$(this).siblings( '.open-arrow' ).toggleClass('closed-arrow');

更新 fiddle :http://jsfiddle.net/6gZAY/3/