Question

我有多个图像标签，用户可以单击它们以“选择”它们。有一个隐藏的输入标签，它将是图像ID的CSV，它将用作所选ID的列表。当单击图像并且之前未选择它时，我想将该图像的ID添加到隐藏的输入中。如果图像是先前选择的，则应从隐藏的输入中删除其ID。

我有以下HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://jadezebra.test/wp-content/uploads/2018/02/buffet-315691_1280.jpg" width="100" height="100" data-service-id="464" class="selected-service">
<img src="http://jadezebra.test/wp-content/uploads/2017/12/computer-repair-Copy.jpg" width="100" height="100" data-service-id="95" class="selected-service">
<input type="hidden" name="selected_services">
<script>
  (function($) {
    $('img[data-service-id]').on('click', function() {
      $selected = $('input[name="selected_services"]').val().split(',');
      if ($(this).hasClass('selected-service')) {
        var removeItem = $(this).attr('data-service-id');
        $selected = $.grep($selected, function(value) {
          return value != removeItem;
        });

        $(this).removeClass('selected-service');
      } else {
        console.log($selected);
        $(this).addClass('selected-service');
        $selected.push($(this).attr('data-service-id'))
      }
      $('input[name="selected_services"]').val($selected.join(','))
    })
  })(jQuery);
</script>
<button type="submit" class="btn btn-primary">Remove Selected Services</button>

当页面加载并且用户在第一个IMG标记之前单击时，在隐藏输入值的开头插入逗号。因此，如果单击第一个img标签，然后单击第二个img标签，则隐藏的输入值应为",464,95"，而实际上应该是"464,95"，这是我在做什么错？

在单击第一个img标签一次之后在控制台中登录$ selected时，数组中只有一个项目（应该是这样）。

Answer 1

通过拆分$selected的值创建数组input时，它将创建""的一项，因此要避免这种情况，请首先检查其长度，如果没有，请检查长度大于1，只需将其初始化为空数组[]。

  var i_val = $('input[name="selected_services"]').val();
  $selected = (i_val.length > 1) ? i_val.split(',') : [];

堆栈片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://jadezebra.test/wp-content/uploads/2018/02/buffet-315691_1280.jpg" width="100" height="100" data-service-id="464" class="selected-service">
<img src="http://jadezebra.test/wp-content/uploads/2017/12/computer-repair-Copy.jpg" width="100" height="100" data-service-id="95" class="selected-service">
<input type="hidden" name="selected_services">
<script>
  (function($) {
    $('img[data-service-id]').on('click', function() {
      var i_val = $('input[name="selected_services"]').val();
      $selected = (i_val.length > 1) ? i_val.split(',') : [];
      if ($(this).hasClass('selected-service')) {
        var removeItem = $(this).attr('data-service-id');
        $selected = $.grep($selected, function(value) {
          return value != removeItem;
        });

        $(this).removeClass('selected-service');
      } else {
        console.log($selected);
        $(this).addClass('selected-service');
        $selected.push($(this).attr('data-service-id'))
      }
      $('input[name="selected_services"]').val($selected.join(','))
    })
  })(jQuery);
</script>
<button type="submit" class="btn btn-primary">Remove Selected Services</button>

Answer 2

我发现代码有两个主要问题：

.split有一个问题，其中的数组[""]中有空字符串，这将导致代码中出现意外行为。
存在一个问题，原因是该逻辑的结构如何使其在您第一次单击图像时不起作用。仅从第二次单击开始工作。

这里是工作版本...请注意，我故意使隐藏字段可见，以便您可以在演示过程中实际看到值：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://jadezebra.test/wp-content/uploads/2018/02/buffet-315691_1280.jpg" width="100" height="100" data-service-id="464" class="selected-service">
<img src="http://jadezebra.test/wp-content/uploads/2017/12/computer-repair-Copy.jpg" width="100" height="100" data-service-id="95" class="selected-service">
<input  name="selected_services">
<script>
  (function($) {
    $('img[data-service-id]').on('click', function() {

      $value = $('input[name="selected_services"]').val()
      $selected = !!$value.length ? $value.split(',') : [];
      var currentItem = $(this).attr('data-service-id');	

      if($selected.indexOf(currentItem) < 0) {
	$selected.push(currentItem);
      } else {
	$selected = $.grep($selected, function(value) {
	  return value != currentItem;
	});
      }
			
      if ($(this).hasClass('selected-service')) {				
        $(this).removeClass('selected-service');
      } else {
        $(this).addClass('selected-service');
      }
      $('input[name="selected_services"]').val($selected.join(','))
    })
  })(jQuery);
</script>
<button type="submit" class="btn btn-primary">Remove Selected Services</button>

为什么JS Join在第一个值之前添加定界符？

2 个答案: