Question

我似乎无法以优雅的方式做到这一点，我不明白我所看到的一些行为。

我的数组存储在html中，如下所示：
<input type="hidden" id="myField" value="1,2,3,5,8,13">

要添加一个值，我必须这样做，这真的是最干净的方法吗？

$('#myField').val($('#myField').val() + ',' + 21);

为了消除我的价值，我必须做这样的事情：

newValues=$.grep($('#myField').val(), function(value) {  
        return value != 3;  
     });  
      $('#myField').val(newValues);

除此之外不起作用......因为我得到了与此处所示相同的行为：

如果我这样做：

$.grep('1,2,3',function(value){return value!=3;})

它返回这个，为什么我得到这些额外的空白元素？如何从隐藏输入中删除3？：

["1", ",", "2", ","]

Answer 1

您可以使用.split()和.join()将其视为数组，例如添加值：

$("#myField").val(function(i, v) {
  var arr = v.split(',');
  arr.push('21');
  return arr.join(',');
});

或删除一个：

$("#myField").val(function(i, v) {
  return $.grep(v.split(','), function(value) {  
           return value != 3;  
         }).join(',');
});

You can test it out here，在每种情况下我们都将字符串值转换为数组，操纵数组，然后将其转换回字符串。另一种方法是始终处理数组，然后在需要时将其转换为字符串，例如在提交表单之前在$("form").submit(...)中。

如果您在整个地方都这样做，可以将其重新编写为插件，如下所示：

jQuery.fn.extend({
    addToArray: function(value) {
        return this.filter(":input").val(function(i, v) {
           var arr = v.split(',');
           arr.push(value);
           return arr.join(',');
        }).end();
    },
    removeFromArray: function(value) {
        return this.filter(":input").val(function(i, v) {
           return $.grep(v.split(','), function(val) {  
                    return val != value;
                  }).join(',');
        }).end();
    }
});

您的通话看起来像这样（如果需要可链接）：

$("#myField").addToArray('21');
$("#myField").removeFromArray('3');

You can test that version here

Answer 2

隐藏字段的值是字符串，而不是数组。 grep函数将该字符串视为一个字符数组，其中,字符没有任何特殊含义，它只是数组中的另一个元素。

要将字符串视为以逗号分隔的值数组，您需要在处理之前使用JavaScript的split函数将其拆分。完成数组后，您可以使用join将其转换回字符串，然后再将字符串写回隐藏字段。

var newValues = $.grep($('#myField').val().split(','), function(val) {  
    return val != 3;
});  
$('#myField').val(newValues.join(','));

Answer 3

此方法可能对您有所帮助。尝试以下函数删除值并获得结果

function removeVal(list, value) {
  list = list.split(',');
  list.splice(list.indexOf(value), 1);
  return list.join(',');
}

removeVal('1,2,3', '2'); 
//result "1,2"

要添加值，请先发送使用以下函数

function addVal(list, value){
 list = list + value;
return list;
}

addVal("1,2,3",",4"); //result 1,2,3,4

Answer 4

保持与当前相同的值设置，您可以按如下方式添加/删除值：

添加值：

$input = $("input");

var array = $input.val().split(",");
array.push(7,8,9);
$input.val(array);

删除值：

$input = $("input");

var array = $input.val().split(",");
array = $.grep(array, function(n, i) { return n !== "13"; });//"13" can be any value or variable you choose.
$input.val(array);

Short demo here.

但是，如果您能够更改隐藏字段值的格式，则可以使用jQuery中的data（）方法或metadata（）插件（如果您选择：

//Using metadata() with html5 attributes

//Markup

<input type="hidden" id="myField" data-value="[1,2,3,5,8,13]">

//JS

var $input = $("input");

$.metadata.setType("html5");
$input.metadata().value.push(7,8,9);

元数据部分未经测试，但您可以将元素作为对象而不是字符串进行交互。不需要拆分;）

如何使用JQuery从存储在隐藏字段中的数组添加和删除项目

4 个答案: