使用 jquery 从数组列表中添加和删除数组项

Posted 2023-05-09

【中文标题】使用 jquery 从数组列表中添加和删除数组项

【英文标题】：Add and remove array items from array list using jquery

【发布时间】：2020-05-05 06:16:47

【问题描述】：

我想建立一个可以添加和删除用户的功能

以逗号分隔的字符串存储在输入字段中，

在 html 中显示添加的用户列表，以便在需要时删除每个行项目。

不幸的是，我的代码中有以下问题：

逗号分隔的用户列表 + html 列表将用户添加到每个新创建的订单项

从 HTML 列表中删除一个订单项无法正常工作。

预期结果：

输入值： Adam,Bertha,Caesar

html 值：

亚当（删除）

伯莎（删除）

凯撒（删除）

能否请您看看我的js fiddle 并提示我如何在 html + 输入字段中正确显示用户列表？

var users = [];

$("#adddis").click(function() 
  var values = $('input[type=text]').map(function() 
    return $(this).val();
  ).get().join();
  $('#adddisnames').val("");
  addUser(values);
);

function buildUserlist() 

  var html = "<hr>";
  for (var i = 0; i < users.length; i++) 
    html += users[i] + ' <a href="#" onclick="removeUser(' + i + '); return false;">X</a><br>';
  ;
  $('#userdiv').html(html);


function addUser(values) 
  users.push(values);
  buildUserlist();
  $('#storadddis').val(users);


function removeUser(index) 
  users.splice(index, 1);
  buildUserlist();
  $('#storadddis').val(users);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" id="adddisnames" value="">
<input type="button" name="get_value" id="adddis" value="add"> =>
<input type="text" id="storadddis" size="35">
<div id="userdiv"></div>

【问题讨论】：

var values = $('input[type=text]').map(function() return $(this).val(); ).get().join(); 为什么？您正在从页面上的所有输入字段获取用户，包括 storaddis。

只要$("#adddis").click(function() var value = $('#adddisnames').val(); if (value) addUser(value); );

随意删除问题

你知道如何检查用户是否已经存储在数组中并防止保存多余的用户吗？

function addUser(values) if (users.indexOf(values) !=-1) return; users.push(values); buildUserlist(); $('#storadddis').val(users);

【参考方案1】：

首先：把这段代码改成这个

 $("#adddis").click(function() 
     if ($('#adddisnames').val().length !== 0) 
       addItem($('#adddisnames').val());
      else 
        alert ('Please add User!')
     
);

下一步：把这段代码也改成这个

function addItem(values) 
  users.push(values);
  buildUserlist();
  $('#storadddis').val(users.toString());
  $('#adddisnames').val("");

  

【参考方案2】：

您应该使用users 数组作为数据的主控。添加名称时，不要将 input 值与最右边的 input 值一起使用。将最右侧控件中的文本视为输出，而不是输入。

当您使用 jQuery 时，我也会完全使用 jQuery 来填充 div 元素。这样，您还可以确保用户名中可能被误解为 HTML 的任何字符都已正确转义。

对于点击处理程序：最好使用事件委托，并且只在div 元素上定义一个点击处理程序，一次。使用.index() jQuery 方法可以知道点击了哪个链接。

var users = [];

$("#adddis").click(function() 
    addUser($('#adddisnames').val().split(",")); // pass an array as argument
    $('#adddisnames').val("");
);

$('#userdiv').on("click", "a", function ()  // event delegation
    removeUser($(this).parent().index());
);

function buildUserlist() 
    // Use jQuery functions to build the DOM list:
    $('#userdiv').empty().append(
        users.map(function (user) 
            return $("<div>").text(user).append($("<a>").attr("href", "#").text("✘"));
        )
    );
    $('#storadddis').val(users); // do this here -- as it is part of the output


function addUser(values)  // Expect an array as argument here
    values = values.map(value => value.trim()) // trim values
                   .filter(Boolean); // ... and exclude empty entries
    users = users.concat(values);  // join the two arrays
    users = Array.from(new Set(users)); // make list unique
    
    buildUserlist();


function removeUser(index) 
    users.splice(index, 1);
    buildUserlist();

a[href] 
    color:red;
    padding-left: 5px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" id="adddisnames" value="">
<input type="button" name="get_value" id="adddis" value="add"> =>
<input type="text" id="storadddis" size="35">
<div id="userdiv"></div>

【讨论】：

这真的比我尝试编写这个函数要好得多。非常感谢代码上的详细 cmets。我从你身上学到了很多。我对这些功能很满意。我唯一需要弄清楚的是防止将重复的用户添加到数组中。

您可以使用Set 创建一个唯一列表。我为此添加了一行代码。

好的，很酷。但是当提交一个空值时，它会创建一个“x”符号。单击添加时必须检查值是否不为空，然后它就像一个魅力。 $"#adddis").click(function() var value = $('#adddisnames').val(); if (value) addUser(value.split(",")); // pass an array as argument $('#adddisnames').val(""); );

我添加了两行代码来修剪名称周围的空格，并丢弃空条目（例如当您有两个逗号相邻时）。

【参考方案3】：

没有告诉您更新所有内容以使其更清洁。我认为您的简单解决方法是更新这一行：

var values = $('input[type=text]').map(function() 

到

var values = $('input[id=adddisnames]').map(function() 

您之前的方式是查找两个输入字段，然后复制您的结果

【讨论】：

是的，这导致了问题。修复它并且它工作。 Tks

不知道为什么它在解决问题时被否决了