主页 / 问题 / 1032148
Accepted
Дмитрий Сухоцкий
Asked:2020-10-07 23:43:38 +0000 UTC2020-10-07 23:43:38 +0000 UTC

动态添加具有唯一 ID 的输入

  • 772

我面临的任务是单击添加输入，并使用按钮删除此输入。输入的最大数量是 4。每个输入必须有自己的唯一 id (pick1,pick2,pick3 或 pick4)。删除和添加新的后我很困惑。我尝试将值添加到数组并从中拉出计数器，但它不起作用。提示算法。

let count = 0;
let mass = [];
        $('.addPick').click(function(){
            
            var input = document.createElement("input");
            var btn = document.createElement("span");
            var div = document.createElement("div");

            if (count < 4) {
                count++;

                input.setAttribute("type", "text");
                input.setAttribute("id", "pick" + count);
           

                btn.innerHTML = "&times;";
                btn.setAttribute("class", "delete-pick");
                div.append(input,btn);

                $('.new-input').append(div);


                $('.delete-pick').click(function(){
                count--;
  
                  $(this).parent().remove();
                })
            } else {
                alert("Можно выбрать максимум 4 точки");
            }
            

        })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="+" class="addPick">
<div class="new-input"></div>

javascript

1 个回答

  1. Best Answer

    一切都可以以不同的方式完成，但我会建议您正在使用的代码中出现错误。当您在此行中挂起删除时$('.delete-pick')，您为所有元素分配了一个事件，因此如果您有 4 个元素并单击十字，则它会工作 4 次count--。更改$('.delete-pick')为$(btn)。删除的第二个时刻，id旧的保留在元素上，结果，添加新元素后id，它们可以匹配！因此，有必要在元素上重新定义它们

    let count = 0;
let mass = [];

$('.addPick').click(function(){
    var input = document.createElement("input");
    var btn = document.createElement("span");
    var div = document.createElement("div");
    if (count < 4) {
        count++;

        input.setAttribute("type", "text");
        input.setAttribute("id", "pick" + count);


        btn.innerHTML = "&times;";
        btn.setAttribute("class", "delete-pick");
        div.append(input,btn);

        $('.new-input').append(div);

        //изменения
        $(btn).click(function(){
        $(this).parent().remove();
        reAttachId()
        count--;
        })
    } else {
        alert("Можно выбрать максимум 4 точки");
    }
})
function reAttachId() {
  var container = document.querySelectorAll('.new-input input');
  container.forEach((item, index) => {
    item.setAttribute('id', 'pick'+ (index + 1));
  });
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="+" class="addPick">
<div class="new-input"></div>

    • 1

相关问题