jquery - 单击元素时如何添加/删除输入值

Question

我有这个 html 元素：

<input type="text" name="myassetid"><img src=".." data-assetid="152"><img src=".." data-assetid="153"><img src=".." data-assetid="164">

当用户点击时，它会将assetid值附加到输入myassetid。当用户再次点击同一个元素时，assetid 值应该从输入值中移除（切换）。

我的 jquery 中有这个：

$('img').click(function() {
  var assetid = $(this).attr('data-assetid');
  $(this).toggleClass("img-select");
  $('input[name="myassetid"]').val(function(i,val) { 
      return val + (!val ? '' : ',') + assetid;
  });
});

如何对移除部分进行编码？谢谢。

Answer 1

尝试这个：-

这种方法不会清除值并重新创建它们。它只是过滤掉值。

演示

有关任何参考，请参阅Array.filter。

$('img').click(function() {
 var assetid = $(this).data('assetid');
  $(this).toggleClass("img-select");
    $this = $(this);
  $('input[name="myassetid"]').val(function(i,val) { 
      if($this.hasClass('img-select')){
          //append the value
          return val + (!val ? '' : ',') + assetid;
      }
      else
      {
          //remove the value
          return val.split(',').filter(function(ob){return parseInt(ob,10)!==assetid}).join(',');
      }
  });
});

Answer 2

尝试

$('img').click(function() {
    $(this).toggleClass("img-select");
    var value = '';
    $('img.img-select').each(function(){
        value += (!value ? '' : ',') + $(this).attr('data-assetid');
    });
    $('input[name="myassetid"]').val(value);
});

jsFiddle

Answer 3

使用下划线库附加/删除非常简单和最佳的方法时享受排序结果：

 $('body').delegate('img[data-assetid]','click',function(){
     var target=$('input[name=myassetid]')
     var tarw=_.words(target.val(), ",");
     var app=$(this).attr('data-assetid');
    (tarw.indexOf(app)!==-1)?(tarw= _.without(tarw,app)):(tarw.push(app))
     target.val(_.sortBy(tarw,function (n) {return n}).join(','));
})

演示：http: //jsfiddle.net/abdennour/RrpLR/

Answer 4

这是一种方法：只需重新选择所有选定的图像并在每次点击事件出现时重建列表。

var
$images = $('img'),
$input = $('input[name="myassetid"]');

$images.on('click', function () {
     var assetIds = [];

     $(this).toggleClass("img-select");

     $images.filter('.img-select').each(function () {
          assetIds.push($(this).data('assetid'));
     });

     $input.val(assetIds.join(', '));
});