Javascript 单击“仅更改当前Div中的多个Div类”

需要帮助

我有一些可用的分区集，其中所有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>

现在，当我单击div内的按钮时，必须更改具有“box small”类的div。它与以下jQuery一起工作

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

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

你可以在这里找到同样的小提琴

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

请尝试使用

$（this）.closest（）

获取父div，然后使用

find（）

检查

---

在

中，单击事件处理程序添加以下代码

$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');

这将查找具有class
box
的最近父级，然后查找具有class
box small
的子级，然后更改此元素的类



$（'.changecolo'）。单击（函数（）{
$（this）.closest（'.box'）.find（'.box small'）.removeClass（'yellow'）.addClass（'red'）；
});
.box{
宽度：100px；
高度：100px；
显示：块；
保证金：5px；
浮动：左；
}
.小盒子{
宽度：20px；
高度：20px；
显示：块；
保证金：5px；
浮动：左；
}
某人{
宽度：10px；
高度：10px；
显示：块；
保证金：5px；
浮动：左；
}
瑞德先生{
背景色：红色；
}
黄先生{
背景颜色：黄色；
}
.边界{
边框：1px实心#000；
}

改变
T
A.
改变
T
A.
改变
T
A.
您使用的
最近（）
不正确，请尝试为其指定选择器而不是函数。从那里，您可以使用
$this.find（）
获取
.box small
元素。您还可以使用
toggleClass（）
在每次连续单击时在类之间进行更改。试试这个：

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

在jquery
中使用
.sibbines（）
。最近的（）
在您的上下文中不起作用

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

或

Use可以使用$this选择器（如果HTML结构没有更改）来获取下一个兄弟节点，如下所示：

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

更新小提琴：

试试这个

脚本

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

@ammarcs这将很好地工作-即使是编辑之前的原始版本。使用
next（）.next（）
将使其保持当前HTML结构。如果HTML更改，它将无法工作。最好的方法应该是
closest（）
和
find（）
toggleClass将添加class
yellow
如果不存在，询问者希望删除它。同样适用于
red
。如果只有两个类，我仍然喜欢
addClass
和
removeClass
链接。它使代码更具可读性。@t没错，这是一个切换，它更符合始终可见的按钮。@Vijay true，但这意味着按钮只能工作一次。这样，按钮将始终具有标签状态下的“更改颜色”效果。如果这不是OP想要的行为，它很容易改变。“我只是在展示其他选择。”罗里姆克罗桑帮了大忙，非常感谢你的及时解决方案。我对stackoverflow中的反应感到惊讶。真的找到一个很棒的地方，那里有很棒的人：）
$('.changecolo').click(function () {
    var $this = $(this);
    $this.siblings('.box-small').toggleClass('yellow red');
});

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

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

});  

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