使用jquery添加/删除逗号分隔的输入值 [英] Add/Remove comma-separated input values with jquery

问题描述

我可以添加输入值和删除但我想要实现的目标看起来很混乱。

我有两个图像，点击后，给我他们的用户ID。因此，单击时，会添加隐藏的输入值1。单击其他图像时，相同：

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

如果再次点击相同的图片，他们的ID将被删除（如 toggleClass 有点事。这是我将两个链接拼接在一起所面临的棘手问题。

完整HTML（示例）：

 < img src =urlid =1class =avatar/> 
< img src =urlid =2class =avatar/> 
＃这应该在循环中吗？目前还没有。 
< input id =selective-avatarsname =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]; 
}）; 
 //删除大约8行，因为什么都不起作用
 
 // $（this）.toggleClass（ 'avatar-circle-display-loop-select'）
}）; 
  

我试图不去反应路线，因为我想在旁边项目中使用纯jquery。 / p>

我想要的只是< input id =selective-avatarsname =avatars []type = hidden value =1,2等等/> 转到控制器。

解决方案

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

  $（'。avatar'）。 click（function（）{
 var $ this = $（this）; 
 $ this.data（selected，！$ this.data（selected））; //将是`undefined `
 //最初，这是假的
 var value = $（'。avatar'）
 .filter（function（）{
 return $（this）.data（选中）; 
}）
 .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））; //最初是`undefined` 
 //这是假的
 const value = Array.from（$ （'.avatar'））
 .filter（elm => $（elm）.data（selected））
 .map（elm => elm.id）
。 join（，）; 
 $（＃selected-avatars）。val（value）; 
}）; 
  

I can add values to an input and remove but what I want to achieve looks messy.

I have two images that when clicked, gives me their user id. So when clicked, a hidden input value of 1 is added. When the other image is clicked, same:

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

If same image is clicked, again, their id is removed (like a toggleClass sort of thing). That is the tricky part I face with piecing the two links together.

Full HTML (example):

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

I was trying not going the react route as I wanted to use pure jquery in the side project.

All I want is <input id="selective-avatars" name="avatars[]" type=hidden value="1,2, etc" /> going to the controller.

解决方案

It looks like the id on the .avatar elements tells us what values to include in the hidden input. I'd keep a flag on the element and just rebuild the input value every time:

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

I notice you've used ES2015 and above features, so in 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添加/删除逗号分隔的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！