Question

我有第一个列表的待办事项列表，我可以添加元素。我也可以动态创建多个toDo列表，但是在这里添加它时，它被添加到第一个列表而不是我点击的相应列表。请有人帮助我，我对JavaScript很陌生。

＆＃13;

$toDoList = $('#toDoList');
$newTodoList = $('#newTodoList');
$parent = $('#parent');
$ul = $('ul');
$totalList = $('.totalList');

$(".remove").click(function() {
  confirm('Are you sure? do you want to delete the item') ? $(this).parent().remove() : $(this);
});

$("li").click(function() {
  $(this).hasClass("addBorder") ? $(this).removeClass("addBorder") : $(this).addClass("addBorder");
});

$('body').on('click', '.add', function() {
  var itemName = $('#itemName').val();
  var listItem = $('<li>' + itemName + '<button type="button" class="buttonStyle">-</button></li>');
  listItem.on("click", function() {
    confirm('Are you sure? do you want to delete the item') ? $(this).remove() : $(this);
  });
  $totalList.append(listItem);
  $('#itemName').val('');
});

index = 1;
i = 1;

function addNewList() {
  var newList = $('<div class="listParent" id="newList"><button type="button" class="addNewList" onClick="addNewList()">+</button><h2>My ToDO List!!</h2><ul id="toDoList" class="totalList"><li>Java script<button type="button" class="remove buttonStyle">-</button></li><li>Angular<button type="button" class="remove buttonStyle">-</button></li><li>Jasmine<button type="button" class="remove buttonStyle">-</button></li></ul><div class="inputText"><input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input></div></div>');
  $('#newList').clone().attr('id', 'newList' + index++)
    .insertAfter($('[id^=newList]:last'));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="parent">
  <div class="listParent" id="newList">
    <button type="button" class="addNewList" onclick="addNewList()">+</button>
    <h2>My ToDO List!!</h2>
    <ul id="toDoList" class="totalList">
      <li>Java script<button type="button" class="remove buttonStyle">-</button></li>
      <li>Angular<button type="button" class="remove buttonStyle">-</button></li>
      <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li>
    </ul>
    <div class="inputText">
      <input type="text" id="itemName" class="leftmargin10" name="ListItem"><button type="button" id="addButton" class="buttonPlacement buttonStyle add">+</button></input>
    </div>
  </div>
  <!-- New list -->

＆＃13;

Answer 1

我假设您单击+将项目添加到列表中。

你有这行代码：

$totalList.append(listItem);

理论上应该将listItem附加到每个具有class ='totalList'的列表中，我想你只想将它添加到单击+按钮的列表中，所以我会将该行更改为

$(this).closest('.totalList').append(listItem);

Answer 2

我看到的第一件事是你使用了多次相同的id。

所以我将它们全部删除了，因为要删除“待办事项列表” 我简化了你的代码...我希望这会有所帮助。

// Remove (Delegate the clicks)
$(document).on("click",".remove",function(){
  confirm('Are you sure? do you want to delete the item')? $(this).parent().remove():$(this);
});

// Li border  (Delegate the clicks)
$(document).on("click","li",function(){
  $(this).hasClass("addBorder")?$(this).removeClass("addBorder"):$(this).addClass("addBorder");
});

// Add a to do item to the list where the add button has been clicked.
$('body').on('click', '.add', function () {
  
  // Find the relevant elements.
  var thisParent = $(this).closest(".listParent");
  var newTodoVal = thisParent.find(".newToDo");
  var thisList = thisParent.find(".totalList");

  // If there in a name inputed.
  if(newTodoVal.val() !=""){
    var listItem = "<li>"+newTodoVal.val()+"<button type='button' class='buttonStyle'>-</button>";
    thisList.append(listItem);
    newTodoVal.val('');
  }
});

// Clone the last list to create a new one.
$(".addNewList").on("click",function(){
  var lastList = $(".listParent").last();
  lastList.clone().insertAfter(lastList);
});

.addBorder{
  border:1px solid black;
  max-width:10em;
}
.leftmargin10{
  margin-left:10px;
}
.buttonStyle{
  margin-left:0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <button type="button" class="addNewList">+</button>
  <div class="listParent">
    <h2>My ToDO List!!</h2>
    <ul class="totalList">
      <li>Java script<button type="button" class="remove buttonStyle">-</button></li>
      <li>Angular<button type="button" class="remove buttonStyle">-</button></li>
      <li>Jasmine<button type="button" class="remove buttonStyle">-</button></li>
    </ul>
    <div class="inputText">
      <input type="text" class="leftmargin10 newToDo" name="ListItem">
      <button type="button" class="buttonPlacement buttonStyle add">+</button>
    </div>
  </div>
  <!-- New list -->
</div>

使用相同的类名称将元素追加到动态生成的div - Jquery

2 个答案: