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

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

$('.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);
});

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

1 个答案: