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="">

Answer 2

您的意思是这样的：

var selectedColors = [];
$('.colors').on('click', function () {
	const clickedColor = $(this).attr('data-color');
	selectedColors = selectedColors.includes(clickedColor) ? selectedColors.filter(color => color != clickedColor) : [...selectedColors, clickedColor];
	$('#colorvalues').val(selectedColors.join(','));
});

<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 id="colorvalues" name="colorvalues" value="">

Answer 3

希望对您有所帮助：

$(document).ready(function(){
  $('.colors').on('click',function() {
      var color = $(this).data('color');
      if (!$(this).hasClass('selected')) {
        // add value if is not selected class
        $('#colorvalues').val(
        $('#colorvalues').val() === "" ? 
        color :
        $('#colorvalues').val() + ',' + color
        );
        $(this).addClass('selected');
      } else {
        let value = '';
        if ($('#colorvalues').val() === color) {
          value = '';
        } else if ($('#colorvalues').val().search(color) === 0) {
          value = $('#colorvalues').val().replace(color + ',', '');
        } else {
          value = $('#colorvalues').val().replace(',' + color, '')
        }
        
        $('#colorvalues').val(value);
        $(this).removeClass('selected');
      }

      console.log($('#colorvalues').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="">

谢谢

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

3 个答案: