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类。

你可以在这里找到相同的小提琴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

Answer 2

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

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

这将找到最接近父的类box，然后找到具有类box-small的后代，然后更改此元素的类。

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

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

$('.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 4

尝试使用$(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 5

使用可以使用$ this选择器（如果HTML结构没有改变）来获得这样的下一个兄弟：

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

更新小提琴： 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类”

7 个答案: