Question

我似乎无法理解当我点击另一个li时removeClass没有删除活动类的原因。如果它是相同的li然后我可以使用兄弟姐妹来删除课程，但遗憾的是，这在这里也不起作用。

我想了解我遇到的这个简单问题。

$('.r-picker li').click(function(){
  $('.r-picker li .data.active').removeClass('active');
  $('.r-picker li .data').addClass('active');
});

.active{
  color:red;
  font-size:25px;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li>
      <div class="data">me1</div>
    </li>
    <li>
      <div class="data">me1</div>
    </li>
  </ul>
</div>

http://jsfiddle.net/Lb65e/125/

Answer 1

<强> Updated fiddle

您应该使用$(this)来引用点击的li：

$('.data', this).addClass('active');

否则代码中的.data选择器会将类添加到此类的所有元素中：

$('.r-picker li .data').addClass('active');

注意：当您点击使用时，还需要从类active的所有元素中删除课程data：

$('.r-picker li .data').removeClass('active');

希望这有帮助。

＆＃13;

$('.r-picker li').click(function() {
  $('.r-picker li .data').removeClass('active');
  $('.data', this).addClass('active');
});

＆＃13;

.active{
  color:red;
  font-size:25px;
  font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r-picker">
  <ul>
    <li>
      <div class="data">me1</div>
    </li>
    <li>
      <div class="data">me1</div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您的代码正在工作。这是它的作用：

 $('.r-picker li .data.active').removeClass('active');

找到包含类data和active的所有元素，并从所有元素中删除active。

 $('.r-picker li .data').addClass('active');

找到包含类data的所有元素，并将类active添加到所有元素中。

因此，一旦运行，您就会将类active添加回所有删除它的元素。

在您的事件处理程序中，当添加类时，您只需将其添加到所涉及的<li>：

$(this).find(".data").addClass("active");

jQuery事件机制确保this绑定到事件涉及的DOM元素，因此$(this)为您提供该元素的jQuery对象。 .find()方法从该元素开始执行DOM选择器搜索，因此$(this).find(".data")在点击元素下方的DOM子树中查找仅具有类data 的元素。< / p>

Answer 3

您需要在当前li中突出显示div。

$('.r-picker li').click(function() {
    $('.r-picker li .data.active').removeClass('active');
    $(this).find('.data').addClass('active');
});

首先删除活动类，然后在。div.data this中找到li并将该类添加回来...

继承你的小提琴更新和工作：http://jsfiddle.net/Lb65e/126/

为什么jQuery removeClass不能使用click功能？

3 个答案: