Question

大家好我有一个输入框，只要用户点击添加单词按钮，就会在其中添加val文本作为锚标记到renderAdded div。添加它们后，用户应该能够在单击它们时删除每个元素。事情是工作但是如果你点击它们太快，DOM元素将被删除在前端但不是所有这些都来自阵列。

您可以在console.log("after removing: ", arr)。

中看到

有什么建议吗？

＆＃13;

var keywords = []

$("button").click(function(e) {
  var key = $('#' + "inputText").val();
  keywords.push(key)
  addOnDiv(keywords)
  removeKeywordOnClick(keywords, "renderAdded")
});


function addOnDiv(arr) {
  var formatedKeywords = '';
  for (var i = 0; i < arr.length; ++i) {
    var k = '<a  class="ui label deleteKeyword">' + arr[i] + " ; " + '<i  data-value="' + i + '" class="delete icon"></i></a>';
    formatedKeywords = formatedKeywords + k;
  }
  $("#renderAdded").html(formatedKeywords);
}

function removeKeywordOnClick(arr, idDiv) {
  $("#" + idDiv + " > a").click((evt) => {
    var index = $(evt.target).children().attr("data-value")
    $(evt.target).remove()
    arr.splice(index, 1);
    console.log("after removing: ", arr)
    $('#' + "inputText").val("")
  })
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="renderAdded"></div>
<input placeholder="Type something" id="inputText" type="text">
<button>
Add word
</button>

＆＃13;

Answer 1

基本上发生的事情是你有多个不同步的真相来源。

'keywords'数组用于设置添加单词时显示的单词列表，但删除单词时直接删除单击的DOM元素，然后通过传递引用仅间接更新'关键字'在你的函数之间（作为arr）。（您会注意到，如果您快速删除一堆单词然后添加一个单词，那么keywords中仍然存在的“额外”单词将重新插入到DOM中。）

这里我把它简化为单一的事实来源：一切都直接基于keywords数组运行，函数之间没有传递数组引用，并且不会直接删除被点击的元素（而是{ {1}}第二次被称为基于addOnDiv()数组重绘整个列表。

keywords

var keywords = []

$("button").click(function(e) {
  var key = $('#' + "inputText").val();
  keywords.push(key)
  addOnDiv()
  removeKeywordOnClick("renderAdded")
});


function addOnDiv() {
  var formatedKeywords = '';
  for (var i = 0; i < keywords.length; ++i) {
    var k = '<a  class="ui label deleteKeyword">' + keywords[i] + " ; " + '<i  data-value="' + i + '" class="delete icon"></i></a>';
    formatedKeywords = formatedKeywords + k;
  }
  $("#renderAdded").html(formatedKeywords);
}

function removeKeywordOnClick(idDiv) {
  $("#" + idDiv + " > a").click((evt) => {
    var index = $(evt.target).children().attr("data-value")
    //$(evt.target).remove()
    keywords.splice(index, 1);
    addOnDiv();
    removeKeywordOnClick("renderAdded")
    
    console.log("after removing: ", keywords)
    $('#' + "inputText").val("")
  })
}

您可以通过在容器上放置“delete”事件并将其委托给<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="renderAdded"></div> <input placeholder="Type something" id="inputText" type="text"> <button> Add word </button>标记来进一步简化此操作;这样，每次添加单词时都不必绑定新的事件处理程序。（我还将数据属性移动到<a>本身，比遍历到孩子<a>找到它更方便。）这使您的功能更加干燥：'添加'和'删除'两者都更改关键字数组，然后调用相同的函数将列表重绘为DOM。

<i>

var keywords = []

$("button").on("click",function() {
  keywords.push($('#inputText').val()) // add the word
  drawKeywords()
});

$('#renderAdded').on("click","a",function() {
  keywords.splice($(this).data("value"),1) // remove the word
  $("#inputText").val("") // clear the input field
  drawKeywords()
});

function drawKeywords() {
  var formattedKeywords=''
  for (var i=0; i<keywords.length;i++) {
    formattedKeywords += '<a data-value="' + i + '" class="ui label deleteKeyword">' + keywords[i] + " ; " + '<i class="delete icon"></i></a>'
  }
  $("#renderAdded").html(formattedKeywords)

  console.log(keywords)
}

点击过快时不会删除数组元素

1 个答案: