javascript - 单击仅在当前 Div 中更改多个 Div 类

Question

需要帮助

我有一些可用的划分集，其中所有的 div 都具有相同的类。每个 div 包含一个按钮和一些其他 div。

<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>
<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>
<div class="red box border">
    <button class="changecolo">change</button>
    <div class="sb">t</div>
    <div class="box-small yellow">A</div>
</div>

和使用的css

.box {
    width:100px;
    height:100px;
    display:block;
    margin:5px;
    float:left;
}
.box-small {
    width:20px;
    height:20px;
    display:block;
    margin:5px;
    float:left;
}
.sb {
    width:10px;
    height:10px;
    display:block;
    margin:5px;
    float:left;
}

.red {background-color:red;}
.yellow {background-color:yellow;}
.border{border:1px solid #000;}

现在，当我单击 div 内的按钮时，必须更改具有“box-small”类的 div。它适用于以下 jQuery。

$('.changecolo').click(function () {
    var $this = $(this);
    $this.closest(function(){
        $('.box-small').removeClass('yellow');
        $('.box-small').addClass('red');
    });
});

但问题是当我点击按钮时，所有 div 的样式都在改变。我只想更改当前的 div 类。

您可以在这里找到相同的 fiddle http://jsfiddle.net/om749rbd/6/

您的宝贵帮助将不胜感激。谢谢

Answer 1

您对 closest() 的使用不正确，请尝试为其提供选择器而不是函数。从那里您可以使用 $this.find() 获取 .box-small 元素。您还可以使用 toggleClass() 在每次连续点击时在类之间切换。试试这个:

$('.changecolo').click(function () {
    var $this = $(this);
    $this.closest('.box').find('.box-small').toggleClass('yellow red');
});

Updated fiddle