使用 jquery 添加/删除逗号分隔的输入值

Question

我可以将 add 值输入到输入和 remove 但我想要实现的目标看起来很乱。

我有两张图片，点击后会显示他们的用户 ID。因此，当单击时，会添加一个隐藏的输入值 1。当点击另一张图片时，同样：

<input id="selective-avatars" name="avatars[]" type=hidden value="1,2" />

如果单击相同的图像，则再次删除它们的 id（例如 toggleClass 之类的东西）。这是我将两个链接拼凑在一起时面临的棘手部分。

完整的 HTML（示例）：

<img src="url" id="1" class="avatar" />
<img src="url" id="2" class="avatar" />
# Should this be in the loop also? It's currently not.
<input id="selective-avatars" name="avatars[]" type=hidden />

JS：

$('.avatar').click(function(){
  let {id} = this;
  //let array = $('#selective-avatars').val().split(',');
  $('#selective-avatars').val(function(i, val){
     return [val + (!val ? '' : ',') + id];
  });
  //Removed about 8 lines as nothing works

  //$(this).toggleClass('avatar-circle-display-loop-select')
});

我试图不走反应路线，因为我想在副项目中使用纯 jquery。

我想要的只是<input id="selective-avatars" name="avatars[]" type=hidden value="1,2, etc" /> 去控制器。

Answer 1

看起来.avatar 元素上的id 告诉我们要在隐藏输入中包含哪些值。我会在元素上保留一个标志，并且每次都重建输入值：

$('.avatar').click(function(){
    var $this = $(this);
    $this.data("selected", !$this.data("selected")); // Will be `undefined`
                                                     // initially, which is falsy
    var value = $('.avatar')
        .filter(function() {
            return $(this).data("selected");
        })
        .map(function() {
            return this.id;
        })
        .get()
        .join(",");
    $("#selected-avatars").val(value);
});

我注意到你已经使用了 ES2015 及以上的特性，所以在 ES2015 中：

$('.avatar').click(function() {
    const $this = $(this);
    $this.data("selected", !$this.data("selected")); // Will be `undefined`
                                                     // initially, which is falsy
    const value = Array.from($('.avatar'))
        .filter(elm => $(elm).data("selected"))
        .map(elm => elm.id)
        .join(",");
    $("#selected-avatars").val(value);
});