為什么我的

Question

我正在使用 HTML、CSS 和 jQuery 制作待辦事項列表。 所以基本上當人們輸入一個活動並按下“+”按鈕時，它會與“刪除”（Font Awesome Recycle Bin）圖標一起添加到列表中，以便用戶可以刪除該活動。 我已經使用 .append() 函數實現了這一點。 但是，當用戶添加第一個項目時，有一個刪除按鈕。 然而，對於每個其他列表，刪除按鈕的數量會成倍增加。 （例如，當用戶添加第二個項目時，該項目有兩個刪除按鈕，當他們添加第三個項目時，該項目有三個刪除按鈕）。 我不明白為什么會發生這種情況以及解決此問題的最佳方法是什么？

我在 .listInput 上使用了 .append() 並附加了 .newItem。 然后我在 .newItem 上使用了 .append() 並附加了 can 圖標。

 $(".enter").click(function() { var $item = $('input[name=add]').val(); if ($item.length > 0) { $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '</li>'); $('.newItem').append('<i class="animated fadeIn far fa-trash-alt fa-1x"></i>'); } else { alert("Enter an acitvity to add"); } })

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="takeInput"> <input type="text" name="add" value="Add Your Item Here"> <i class="enter fas fa-plus fa-3x"></i> </div> <ul class="listInput"> </ul>

對於每個列表項，我只需要一個垃圾桶圖標。

Answer 1

$('.newItem').append()將使用類newItem將所有元素附加到某個元素，而不僅僅是剛剛添加的元素。 要修復它只需使用一個附加：

 $(".enter").click(function() { var $item = $('input[name=add]').val(); if ($item.length > 0) { $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '<i class="animated fadeIn far fa-trash-alt fa-1x"></i></li>'); } else { alert("Enter an acitvity to add"); } }) 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="takeInput"> <input type="text" name="add" value="Add Your Item Here"> <i class="enter fas fa-plus fa-3x"></i> </div> <ul class="listInput"> </ul> 

Answer 2

請試試這個

var $item = $('input[name="add"]').val();

Answer 3

問題是$（'。newItem'）引用具有該類的任何元素。 例如，如果列表中有五個項目，則它們都將具有類新項目。 如果你要添加另一個項目（生成六個項目），那么你要使用類'newItem'為每個元素添加一個bin圖標

Answer 4

$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '</li>' + '<i class="animated fadeIn far fa-trash-alt fa-1x"></i>');
  } else {
    alert("Enter an acitvity to add");
  }
})

Answer 5

 $(".enter").click(function() { let item = $('input[name=add]').val(); let li = $('<li class="newItem animated fadeIn"/>'); let iconTrash = $('<i style="margin-left:1em;" class="animated fadeIn far fa-trash-alt fa-1x"/>') if (item.length >= 0) { li.append(item,iconTrash) $(".listInput").append(li); } else { alert("Enter an acitvity to add"); } }) 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="takeInput"> <input type="text" name="add" value="Add Your Item Here"> <i class="enter fas fa-plus fa-3x"></i> </div> <ul class="listInput"> </ul> 

Answer 6

問題是垃圾桶圖標被添加到所有具有類'newItem'的元素中。 因此，您必須創建一個li(list item)元素並將其附加到ul(unordered list)元素。 然后創建圖標並將其附加到創建的列表項元素。 您可以使用document.createElement(tagName)函數創建元素。 並使用 javascript 或 jquery 附加它