Как добавить активный класс к моему элементу li в html css

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

Вы добавляете класс, а затем немедленно удаляете его. Удалите $(this).removeClass('activeColor'); из функции click, чтобы остановить это. Если вы хотите очистить предыдущие элементы с этим классом, вы можете использовать:

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

К alert цвет, один из вариантов будет:

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

jsFiddle

Answer 2

Во-первых, вы пытаетесь установить прослушиватель щелчков для массива, а не для отдельных элементов. Во-вторых, вы добавляете класс и сразу же удаляете его.

Попробуйте приведенный ниже код, который решает обе проблемы.

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