如何将值添加到数组并将其删除（如果它已包含在jQuery中）

Question

我正在尝试创建一个多过滤器，但是我对JS代码有困难。 单击时，必须将类别属性添加到数组中，然后再次单击将其从数组中删除。

这是我的代码无法正常工作。

$('span[data-genre]').click(function(event) {

  var genre = [];
  var category = $(this).attr('data-genre');

  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    var removeItem = $(this).attr('data-genre');
    genre = $.grep(genre, function(value) {
      return value != removeItem;
    });

    alert(genre);
  } else {
    $(this).addClass('active');
    genre.push($(this).attr('data-genre'));
    alert(genre);
  }
});

span {
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
}

span:hover {
  color: green;
}

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-genre="1">1</span>
<span data-genre="2">2</span>
<span data-genre="3">3</span>
<span data-genre="4">4</span>

Answer 1

您只需要将var genre = [];移动到click事件之外。

由于它位于您的click事件中，因此每次您单击对象时它都会重置

演示

var genre = [];
$('span[data-genre]').click(function(event) {

  var category = $(this).attr('data-genre');

  if ($(this).hasClass("active")) {
    $(this).removeClass('active');
    var removeItem = $(this).attr('data-genre');
    genre = $.grep(genre, function(value) {
      return value != removeItem;
    });

    console.log(genre);
  } else {
    $(this).addClass('active');
    genre.push($(this).attr('data-genre'));
    console.log(genre);
  }
});

span {
  display: block;
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
}

span:hover {
  color: green;
}

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-genre="1">1</span>
<span data-genre="2">2</span>
<span data-genre="3">3</span>
<span data-genre="4">4</span>