如何向 html css 中的 li 元素添加活动 class

Question

我一直在尝试在选择列表项时获得活动边框。我无法让项目显示 CSS 背景色。我怎样才能让它工作...那么我要问的第二个问题是，我如何在单击按钮时显示选择了哪种颜色的警报？

这是我要合并的 javascript。

  $(".swatches li").click(function() {
        $(this).addClass('activeColor');
        $(this).removeClass('activeColor');
   });

这是我的 html

<div class="dropdown-container">
  <ul class="swatches" id="swatches">
    <li class="cell">
      NONE
      <div class="colorBox"></div>
      <!--END COLOR BOX-->
    </li>
    <!--END LI-->
  </ul>
  <!--END SWATCHES-->
</div>
<!--END DROPDOWN CONTAINER-->

<div class="buttonForColor">
  <button>
    Change Color
  </button>
</div><!--END BUTTON FOR COLOR-->

css

.activeColor {
  background-color: red;
}

这是我的 jsfiddle https://jsfiddle.net/kotten03/02abL9cu/

如有任何帮助，我们将不胜感激！

Answer 1

首先，您尝试在数组而不是单个元素上设置点击侦听器。其次，您要添加 class 并立即将其删除。

尝试使用下面的代码解决这两个问题。

  var elements =   $(".swatches li");
  for (var i = 0, n = elements.length; i < n; ++i) {
   var e = elements[i];
   $(e).click(function() {
          $(this).addClass('activeColor');
     });
  }

Answer 2

您正在添加 class，然后立即将其删除。从 click 函数中删除 $(this).removeClass('activeColor'); 以停止此操作。如果你想用 class 清除以前的项目，你可以使用：

$(".swatches li").click(function() {
    $(".swatches li").removeClass('activeColor');
    $(this).addClass('activeColor');
});

要alert颜色，一个选项是：

$(".buttonForColor button").click(function() {
    alert($($.find('.activeColor')[0]).text());
});

jsFiddle

如何向 html css 中的 li 元素添加活动 class

How do I add an active class to my li element in html css

javascript

element

class

function

html-lists