jquery - 替换 jquery 中的类，停止执行所需操作的元素

Question

我有一个类别列表，你只能选择一个。所选的有一个类别，当选择不同的过滤器时，所选的类别将失去其所选类别，并返回到未选择的状态。但是，一旦发生这种情况，我就无法再单击该元素来添加类。

$('.bpcustomers_not_selected').click(function() {
  $(this).parent().find('.bpcustomers_selected').removeClass('bpcustomers_selected').addClass('bpcustomers_not_selected');
  $(this).removeClass('bpcustomers_not_selected').addClass('bpcustomers_selected');
});

.bpcustomers_filter li {
  cursor: pointer;
  padding: 10px 0;
}

.bpcustomers_not_selected:hover {
  color: #000;
}

.bpcustomers_selected {
  color: #2585fe;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="bpcustomers_filter">
  <li class="bpcustomers_selected" data-value="0">ALL</li>
  <li class="bpcustomers_not_selected" data-value="1">Under £1000</li>
  <li class="bpcustomers_not_selected" data-value="2">£1000-10,000</li>
  <li class="bpcustomers_not_selected" data-value="3">£10,000-25,000</li>
  <li class="bpcustomers_not_selected" data-value="4">£25,000-50,000</li>
  <li class="bpcustomers_not_selected" data-value="5">Over £50,000</li>
</ul>

如果您单击除 ALL 之外的任何内容，请尝试再次单击 ALL，它不会被选中。

这是如何解决的？

Answer 1

由于 ALL 最初没有 bpcustomers_not_selected 类，而您正在动态添加它，因此您需要使用 .on()在 bpcustomers_filter 中，像这样:

$('.bpcustomers_filter')
  .on('click', '.bpcustomers_not_selected', function() {
    $(this).parent().find('.bpcustomers_selected').removeClass('bpcustomers_selected').addClass('bpcustomers_not_selected');
    $(this).removeClass('bpcustomers_not_selected').addClass('bpcustomers_selected');
  });

.bpcustomers_filter li {
  cursor: pointer;
  padding: 10px 0;
}

.bpcustomers_not_selected:hover {
  color: #000;
}

.bpcustomers_selected {
  color: #2585fe;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="bpcustomers_filter">
  <li class="bpcustomers_selected" data-value="0">ALL</li>
  <li class="bpcustomers_not_selected" data-value="1">Under £1000</li>
  <li class="bpcustomers_not_selected" data-value="2">£1000-10,000</li>
  <li class="bpcustomers_not_selected" data-value="3">£10,000-25,000</li>
  <li class="bpcustomers_not_selected" data-value="4">£25,000-50,000</li>
  <li class="bpcustomers_not_selected" data-value="5">Over £50,000</li>
</ul>