Question

我想为具有特定属性的元素添加一个类。

我尝试了find()或filter()之类的几种功能，但我做对了。

有人可以告诉我更好的方法吗？

$(".b").click(function() {
  $(".b").removeClass("active-filter");
  $(this).addClass("active-filter");
 
  var b = $(this).attr("data-filter");
  var active_element = $('.d[data-filter="' + b + '"]');

  $(".d").removeClass("active-element");
  active_element.addClass("active-element");
});

.b {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.c {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.element {
  float: left;
  display: block;
}

.active-filter {
  background-color: pink;
}

.active-element {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
  <div>
    <div class="b active-filter" data-filter="3">data-filter</div>
    <div class="b" data-filter="4">data-filter</div>
  </div>
  <div>
    <div class="c d" data-filter="3">data-element</div>
    <div class="c d" data-filter="4">data-element</div>
  </div>
</div>

Answer 1

我不明白您为什么使用for循环。试试这个吗？

$(".b").click(function() {
  $(".b").removeClass("active-filter");
  $(".d").removeClass('active-element');

  var clickedItem = $(this); 

  clickedItem.addClass("active-filter");
  $('.d[data-filter=' + clickedItem.data('filter') + ']').addClass('active-element');
});

https://jsfiddle.net/4L91jghs/

Answer 2

从$（this）获取数据属性值，并找到具有相应元素的元素并添加类。

$(".b").click(function() {
  $(".b").removeClass("active-filter");
  $(this).addClass("active-filter");
  var dataFilter = ($(this).attr("data-filter"));

    $(".d").removeClass("active-element");
    $(".element").find(".d[data-filter='" + dataFilter + "']").addClass("active-element");
});

.b {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.c {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.element {
  float: left;
  display: block;
}

.active-filter {
  background-color: pink;
}

.active-element {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
  <div>
    <div class="b active-filter" data-filter="3">data-filter</div>
    <div class="b" data-filter="4">data-filter</div>
  </div>
  <div>
    <div class="c d" data-filter="3">data-element</div>
    <div class="c d" data-filter="4">data-element</div>
  </div>
</div>

Answer 3

您总是可以使用一种更具功能性的方法吗？如您所见，我使用的方法中，只有一个函数可以很好地解决问题，至少在我看来，它不是具有一个较大的函数，相对于一个较大的函数，我通常更喜欢具有多个较小的函数，甚至如果占用更多空间或其他。

如您所见，单击元素后，相关元素将转到process函数，从那里将触发removeClasses函数，我认为我不需要阐明其目的。然后它将触发addClasses并将相关类添加到相关元素，就是这样。

编辑

从效率的角度来看，一个额外的好处是该解决方案没有使用jQuery，这是事实，在任何人跳上这一潮流之前，jQuery的速度都比使用本机实现慢，但坦率地说，主要jQuery的重点不是性能，而是兼容性和可靠性。我怀疑这种差异会如此之大，以至于您不会看到任何重大差异，即用户抱怨速度，但我只是想把这一点也扔出去。

// Short hand... 
const $e = queryString => {
  const els = document.querySelectorAll(queryString);
  if(els.length == 1) return els[0];
  else return els;
};

// A function to remove all 'active-filter' & 'active-element'. 
const removeClasses = () => {
  $e(".b").forEach(i => i.classList.remove("active-filter"));
  $e(".d").forEach(d => d.classList.remove("active-element"));
};

// A function to add 'active-filter' & 'active-element' to the relevant elements.
const addClasses = a => b => {  
  a.classList.add("active-filter");
  b.classList.add("active-element");
};

// A function to do something when relevant elements have been clicked
const process = a => {
  removeClasses();
  addClasses(a)($e(`.d[data-filter='${a.getAttribute("data-filter")}']`));
};

// Now just start the process off. 
$e(".b").forEach(b => b.onclick = () => process(b));

.b {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.c {
  width: 60px;
  height: 60px;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  float: left;
}

.element {
  float: left;
  display: block;
}

.active-filter {
  background-color: pink;
}

.active-element {
  background-color: yellow;
}

<div class="element">
  <div>
    <div class="b active-filter" data-filter="3">data-filter</div>
    <div class="b" data-filter="4">data-filter</div>
  </div>
  <div>
    <div class="c d" data-filter="3">data-element</div>
    <div class="c d" data-filter="4">data-element</div>
  </div>
</div>

Answer 4

你做到了。在不需要使用任何循环或其他任何东西的地方尝试一下。

$(document).on("click",".b",function() {
  $(".b").removeClass("active-filter");
  $(this).addClass("active-filter");

  $(".d").removeClass("active-element");

  var dataFilterVal = $(this).attr('data-filter');
  $('.d[data-filter="' + dataFilterVal + '"]').addClass("active-element");

});

jQuery的魔术

有没有比我更好的方法？如果元素具有相同的属性，则添加类

4 个答案:

编辑