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

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

我有以下HTML：

（函数（$）{
$（'img[data service id]'）。在（'click'，function（）上{
$selected=$（'input[name=“selected_services”]'）.val（）.split（'，'）；
if（$（this）.hasClass（'selected-service'））{
var removietem=$（this.attr（'data-service-id'）；
$selected=$.grep（$selected，函数（值）{
返回值！=removeItem；
});
$（this.removeClass（'selected-service'）；
}否则{
console.log（$selected）；
$（this.addClass（'selected-service'）；
$selected.push（$（this.attr（'data-service-id'））
}
$（'input[name=“selected_services”]'）.val（$selected.join（'，'））
})
})（jQuery）；
删除所选服务

当您通过拆分

输入

的值来创建数组

$Selected

时，它将创建一项

“

”，为了避免这种情况，请先检查其长度，如果不大于1，则将其作为空数组启动

[

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

堆栈片段

（函数（$）{
$（'img[data service id]'）。在（'click'，function（）上{
var i_val=$（'input[name=“selected_services”]”）。val（）；
$selected=（i_val.length>1）？i_val.split（'，'）：[]；
if（$（this）.hasClass（'selected-service'））{
var removietem=$（this.attr（'data-service-id'）；
$selected=$.grep（$selected，函数（值）{
返回值！=removeItem；
});
$（this.removeClass（'selected-service'）；
}否则{
console.log（$selected）；
$（this.addClass（'selected-service'）；
$selected.push（$（this.attr（'data-service-id'））
}
$（'input[name=“selected_services”]'）.val（$selected.join（'，'））
})
})（jQuery）；
删除所选服务

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

.split

存在问题，它在数组

[“”]

中有空字符串，这将导致代码中出现意外行为

在第一次单击图像时，逻辑无法工作的情况下，逻辑的结构会产生问题。它仅从第二次单击开始工作 这是工作版本。。。请注意，我特意将隐藏字段设置为可见，以便您在演示过程中实际看到值：

（函数（$）{
$（'img[data service id]'）。在（'click'，function（）上{
$value=$（'input[name=“selected_services”]'）。val（）
$selected=！！$value.length？$value.split（'，'）：[]；
var currentItem=$（this.attr（'data-service-id'）；
如果（$selected.indexOf（currentItem）<0）{
$selected.push（当前项）；
}否则{
$selected=$.grep（$selected，函数（值）{
返回值！=currentItem；
});
}
if（$（this）.hasClass（'selected-service'））{
$（this.removeClass（'selected-service'）；
}否则{
$（this.addClass（'selected-service'）；
}
$（'input[name=“selected_services”]'）.val（$selected.join（'，'））
})
})（jQuery）；
删除所选服务

可能

$Selected

在索引

[0]

控制台上有空格。日志（$Selected）

会让您了解正在发生的事情，正如@Arvind所指出的-很可能您的位置是空的。