javascript - 如何在隐藏输入中的逗号分隔列表中添加/删除单击时的属性值

Question

我有许多颜色作为无序列表中的列表项。我希望在单击时将列表项属性值以逗号分隔列表(例如红色、蓝色、绿色)的形式添加到我的隐藏输入中。当值已存在于列表中时，我希望将其从那里删除。这是我到目前为止所做的事情。

<ul>
  <li class="colors" data-color="red" id="red">RED</li>
  <li class="colors" data-color="blue" id="blue">BLUE</li>
  <li class="colors" data-color="green" id="green">GREEN</li>
</ul>

<input type="hidden" id="colorvalues" name="colorvalues" value="">

这是 jQuery。

 $('.colors').toggle(function() {
  var color = $(this).data('color');

  $("#colorvalues").val(function() {
    return this.value + color;
  });

  $(this.id).addClass('selected');

}, function() {
  var color = $(this).data('color');

  $("#colorvalues").val(function() {
    return this.value - color;
  });

  $(this.id).removeClass('selected');
});

Answer 1

jQuery#toggle如果我没记错的话，用于显示或隐藏匹配的元素。

您必须在列表元素上添加一个 click 事件监听器，然后检查隐藏输入的值是否已包含单击元素的 color 数据值。

据此，在您的输入值中添加或删除该值。

这是一个基本示例:

$('.colors').on('click', function() {
  const jHidden = $('#colorvalues'),
    chosenColor = $(this).data('color');
  
  // Converts to array, because array manipulation is much easier.
  let colors = (jHidden.val()) ? jHidden.val().split(',') : [];
  
  // If the clicked color is found, remove it from the array.
  if (colors.includes(chosenColor)) {
    colors.splice(colors.indexOf(chosenColor), 1);
  } // If not, add it to the array.
  else {
    colors.push(chosenColor);
  }
  
  // Re-converts it to a string, then affects it to the hidden input.
  jHidden.val(colors.join(','));
  
  console.log(`hidden input's value =`, jHidden.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="colors" data-color="red" id="red">RED</li>
  <li class="colors" data-color="blue" id="blue">BLUE</li>
  <li class="colors" data-color="green" id="green">GREEN</li>
</ul>

<input type="hidden" id="colorvalues" name="colorvalues" value="">