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

Question

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

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

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

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

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

2. 从 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>

Answer 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("");

}  

Answer 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>

Answer 3

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

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

到

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

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