单个类元素 jQuery 的活动类

Question

我有这些按钮，它们实际上是网格中的 p 元素，它们都具有相同的类。我想更改用户单击的 p 元素的颜色。如何在 jQuery 中添加一个活动类，并以仅选择该类中的一个元素的方式执行此操作？顺便说一句，我的 html 中有各种“网格”，全部以相同的方式配置...（因此类网格：-D）

谢谢！

jquery 变量

 const $size = $(".size");

 <div id="red-details" class="extra-details">
          <p>
            The ultimate in style and comfort, the Red Flyer's are great for
            walking and casual wearing.
          </p>

          <h3>Size</h3>
          <div class="grid">
            <p class="size">7</p>
            <p class="size">8</p>
            <p class="size">9</p>
            <p class="size">10</p>
            <p class="size">11</p>
          </div>
          <button class="add-to-cart">Add To Cart</button>
        </div>

Answer 1

一种方法是拥有指定的 CSS。可以处理从具有 CSS 的元素中删除样式，然后将 CSS 设置为单击的元素，这样只有 1 个元素具有应用的样式。

尝试下面的可运行示例。在示例中，我使用 CSS 来实现

.clicked

样式，但您可以根据需要重命名它。

$(document).ready(function() {
    $('p').on('click', function(e) {
      // Any <p> that has the clicked CSS, remove it:
      $('p.clicked').removeClass('clicked');
      
      // Then apply the CSS to the clicked element
      $(this).addClass('clicked');
    })
});

.clicked {
     background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="red-details" class="extra-details">
      <p>
        The ultimate in style and comfort, the Red Flyer's are great for
        walking and casual wearing.
      </p>

      <h3>Size</h3>
      <div class="grid">
          <p class="size">7</p>
          <p class="size">8</p>
          <p class="size">9</p>
          <p class="size">10</p>
          <p class="size">11</p>
      </div>
  <button class="add-to-cart">Add To Cart</button>
</div>