Question

用户列出了许多可用的上课时间。每节课都有一位培训师。

$item_html_start = '<div class="item ' .$current_trainer_slug. ' ' .$current_ridetype. ' ' .$current_day. '">';
$item_html_end = '</div>';

$output[$current_ridetype][$current_day] .= $item_html_start . get_the_title() . $item_html_end;

并生成了这个

<div class="item mirja ponnylektioner mandag">16:00 P2</div>
<div class="item lizzie ponnylektioner mandag">16:00 P3</div>
<div class="item sven ponnylektioner mandag">16:00 P4</div>
<div class="item johan ponnylektioner mandag">16:00 P5</div>

等...
很简单。

我要的是单击按钮，将为每个不与其类匹配的.item div添加一个类。因此，例如，如果我单击<button class="lizzie" name="lizzie">Lizzie</button>，它将把类inactive添加到与.item不匹配的所有lizzie div中。再按一次，将删除所有类别。如果我按下另一个按钮，例如sven，自然会发生同样的事情，但类sven的按钮会自然发生。

我对javascript的经验很少（可以，几乎没有），所以我唯一能想到的是.addClass，但我不确定如何在不违反{{ 3}}到处都是。

该网站包含jQuery，因此如果使生活更轻松，还可以使用它吗？

谢谢。

Answer 1

仅使用CSS，但请记住，我们在这里不添加任何类，而只是直接对元素进行样式设置：

/* here we select all <div> elements
   with a class of 'item'
   which do not match the '.lizzie' selector: */
div.item:not(.lizzie) {
  color: red;
  opacity: 0.5;

div.item:not(.lizzie) {
  color: red;
  opacity: 0.5;
}

<div class="item mirja ponnylektioner mandag">16:00 P2</div>
<div class="item lizzie ponnylektioner mandag">16:00 P3</div>
<div class="item sven ponnylektioner mandag">16:00 P4</div>
<div class="item johan ponnylektioner mandag">16:00 P5</div>

使用JavaScript：

// here we use Array.from():
Array.from(
  // to turn the NodeList returned by
  // document.querySelectorAll()
  // (using the same selector as explained above)
  // into an Array:
  document.querySelectorAll('div.item:not(.lizzie)')

// we then use Array.prototype.forEach() to iterate
// over the Array of elements:
).forEach(

  // using an Array Function syntax:
  // to use Element.classList.add() to add the
  // 'inactive' class-name to each of the elements:
  notLizzieElement => notLizzieElement.classList.add('inactive')
);

Array.from(
  document.querySelectorAll('div.item:not(.lizzie)')
).forEach(
  notLizzieElement => notLizzieElement.classList.add('inactive')
);

.inactive {
  opacity: 0.5;
  color: red;
}

<div class="item mirja ponnylektioner mandag">16:00 P2</div>
<div class="item lizzie ponnylektioner mandag">16:00 P3</div>
<div class="item sven ponnylektioner mandag">16:00 P4</div>
<div class="item johan ponnylektioner mandag">16:00 P5</div>

这与以下方法完全相同，但不使用Arrow语法：

// here we use Array.from():
Array.from(
  // to turn the NodeList returned by
  // document.querySelectorAll()
  // (using the same selector as explained above)
  // into an Array:
  document.querySelectorAll('div.item:not(.lizzie)')

// we then use Array.prototype.forEach() to iterate
// over the Array of elements:
).forEach(function(notLizzieElement)}
  notLizzieElement.classList.add('inactive')
});

Array.from(
  document.querySelectorAll('div.item:not(.lizzie)')
).forEach(function(notLizzieElement){
  notLizzieElement.classList.add('inactive')
});

.inactive {
  opacity: 0.5;
  color: red;
}

<div class="item mirja ponnylektioner mandag">16:00 P2</div>
<div class="item lizzie ponnylektioner mandag">16:00 P3</div>
<div class="item sven ponnylektioner mandag">16:00 P4</div>
<div class="item johan ponnylektioner mandag">16:00 P5</div>

参考文献：

CSS：
- CSS Negation pseudo-class :not()。
JavaScript：
- Array.from()。
- Array.prototype.forEach()。
- Arrow Functions。

Answer 2

您可以使用.toggleClass将类添加/删除到与所选内容匹配的元素。例如：

$('.item').not('.lizzie').toggleClass('inactive');

Answer 3

您可以使用jQuery选择器.not()

 $(selector).not($current_person).addClass('yourClass')

或:not()

$(selector:not(Selector)).addClass('yourClass')

或者您可以使用纯CSS :not()

:not(selector) {
    color: #e2e2e2;
}

其中选择器可以是有效的CSS selecor

将类添加到所有子div的类中，除非与$ current_person匹配

3 个答案: