单击仅在当前 Div 中更改倍数 Div 类

Question

需要帮助

我有一些可用的 div 版本，其中所有 div 都具有相同的 class 版本。每个 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 内的按钮时，必须更改 div 和 'box-small' class。它适用于以下 jQuery.

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

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

您可以在此处找到相同的 Fiddle http://jsfiddle.net/om749rbd/6/

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

Answer 1

尝试使用 $(this).closest() 获取父级 div，然后使用 find()

定位特定的 div

勾选CODE

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

Answer 2

在您的 click 事件处理程序中添加以下代码。

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

这将找到最近的 parent 具有 class box 然后找到后代具有 class box-small 然后更改此元素的 class。

Demo

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

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>

Answer 3

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

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

Updated fiddle

Answer 4

在 jquery .closest() 中使用 .siblings() 在您的上下文中不起作用。

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

或

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

Fiddle

Answer 5

使用可以使用 $this 选择器（如果 HTML 结构不改变）像这样得到下一个兄弟：

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

更新fiddle： http://jsfiddle.net/om749rbd/11/

Answer 6

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

});

updates demo

Answer 7

试试这个

脚本

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

单击仅在当前 Div 中更改倍数 Div 类

On Click Change Multiple Div Classes in Current Div Only

html

javascript

jquery

onclick