时间戳

首页 > 解决方案 > 为什么 JS Join 在第一个值之前添加分隔符？

javascript - 为什么 JS Join 在第一个值之前添加分隔符？

问题描述

我有多个图像标签，用户可以单击以“选择”它们。有一个隐藏的输入标签，它将是图像 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 时，数组中只有一个项目（应该是）。

标签： javascript

解决方案

当您$selected通过 splittnginput的值创建数组时，它将创建 1 项""，因此为避免这种情况，请先检查其长度，如果不大于 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>

推荐阅读