Добавить и удалить элементы массива из списка массивов, используя jquery - PullRequest
Новая
       86

Добавить и удалить элементы массива из списка массивов, используя jquery

1 голос
/ 18 января 2020

Я хотел бы установить sh функцию, где вы можете добавлять и удалять пользователей

  1. в строку, разделенную запятыми, которая хранится в поле ввода и

  2. Показать список добавленных пользователей в html, чтобы удалить каждую позицию в случае необходимости.

К сожалению, у меня есть следующие проблемы в моем коде:

  1. Список пользователей, разделенный запятыми + html список добавляет пользователя к каждому новому созданному позиция

  2. Удаление одной позиции из списка HTML не работает должным образом.

enter image description here

Ожидаемый результат:

входное значение: Адам, Берта, Цезарь

html значение:

Адам (удалить)

Берта (удалить)

Цезарь (удалить)

Не могли бы вы взглянуть на мою js скрипку и дать мне подсказку, как правильно отображать список пользователей в 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>

Ответы [ 3 ]

0 голосов
/ 18 января 2020

Первый: изменить этот код на этот 

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

}
0 голосов
/ 18 января 2020

Вы должны использовать массив 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>
0 голосов
/ 18 января 2020

без указания обновлять все, чтобы сделать его чище. Я думаю, что ваше простое исправление заключается в обновлении этой строки: 

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

До 

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

То, как вы это делали раньше, - это поиск обоих полей ввода, а затем дублирование ваших результатов

...