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

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

尝试

$('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 2

试试这个： -

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

Demo

有关任何推荐，请参阅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 3

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

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

Answer 4

在追加/删除时享受排序结果 非常简单＆amp;使用Underscore库的最佳方法：

 $('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/