Question

我认为这是一个常见问题，但我无法在其他线程中找到答案。

这里的基本思路/目标是，如果任务被标记为重要，则会将其添加到quadrant1。如果不是，则将其添加到quadrant2。完成任务后，可以通过单击将其关闭。

HTML： 我有一个简单的页面：

文本输入（即“任务”）
复选框（即“重要”）
提交按钮（即“submitTask”）
两个div（“quadrant1”和“quadrant2”）。

JS：

$(document).ready( function () {
  $('#submitTask').on("click", function() {
    var task = $("#task").val();
    var important = $("#important").prop("checked");

    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p class='taskHolder'> " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p class='taskHolder'> " + task + " </p>");
      }
    });
  });

  addToQuadrant(task, important);

  $('body').on('click', '.taskHolder', function () {
    $('.taskHolder').slideUp();
  });
});

我的问题是，因为我对两个段落元素使用相同的id（即“taskHolder”），如果我一次向页面添加多个任务，我不能删除多个任务。< / p>

我的问题是：如何动态地向DOM添加元素，同时为其提供唯一的ID或选择器，以便每个任务都可以被唯一定位并关闭？

Answer 1

您需要动态地为每个新添加的元素应用新ID。

//New length every time you click
var newLength = $('[id^=taskHolder]').length + 1;
//Apply the new ID
$("#quadrant1").append(
     "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");

$('#submitButton').click(function(){
    //New length every time you click
    var newLength = $('[id^=taskHolder]').length + 1;
    //Apply the new ID
    $("#quadrant1").append(
          "<p id='taskHolder+newLength+'> New "  + newLength + " </p>");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="quadrant1">
  <p id="taskHolder_1">New 1</p>  
</div>  
<button id="submitButton">Button</button>

Answer 2

使用全局变量'counter'并在每次单击时增加其值，然后使用'taskHolder'附加它。现在，每个任务都有唯一的ID。

选择使用startwith类型选择器。

var cnt = 0;
$(document).ready( function () {
  $('#submitTask').on("click", function() {
    cnt++;
    var task = $("#task").val();
    var important = $("#important").prop("checked");

    var addToQuadrant = function (task, important) {
      if (important == true) {
        $("#quadrant1").append(
          "<p id='taskHolder" + cnt + "' > " + task + " </p>");
      } else if (important == false) {
        $("#quadrant2").append(
          "<p id='taskHolder" + cnt + "'> " + task + " </p>");
  };

  addToQuadrant(task, important);

  $('[id^=taskHolder]').on("click", function() {
     $(this).slideUp();
};

});

替代解决方案

更好的解决方案可能是每个任务的通用类

 "<p class='commonClass" + cnt + "'> " + task + " </p>");

和

$('body').on('click', '.taskHolder', function () {
    $(this).slideUp();
  });

Answer 3

使用唯一ID
使用$（this）目标项目隐藏完成。

$(document).ready( function () {
  
      var addToQuadrant = function (task, important) {
    			
          if (important == true) {
          	var taskid = $("#quadrant1").length + 1;
            $("#quadrant1").append(
              "<p class='taskHolder' id='task-"+taskid+"'> " + task + " </p>");
          } else if (important == false) {
          	var imptaskid = $("#quadrant2").length + 1;
            $("#quadrant2").append(
              "<p class='taskHolder' id='imp-task-"+imptaskid+"'> " + task + " </p>");
      		};
         };  
  
      $('#submitTask').on("click", function() {

        var task = $("#task").val();
        var important = $("#important").prop("checked");
        addToQuadrant(task, important);
      });    


      $('body').on('click', '.taskHolder', function () {
        $( this ).slideUp();
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Important Task
    <div id="quadrant1" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
      
    </div>
    Task
    <div id="quadrant2" style="border:1px dotted;min-height:20px;margin-bottom: 10px">
    </div>


    Task: <input type="text" id="task" />
    <input type="checkbox" id="important" /> Important
    <input type="button" value="Submit" id="submitTask" />

Answer 4

使用：

$(this).slideUp();

而不是

$('.taskHolder').slideUp();

在事件处理程序this中引用事件应用的元素。

以下是我用来实现整个事情的最小代码：

$(document).ready(function() {
  var task = $("#task");
  var cb = $("#important");
  
  $("button").click(function() {
    $("<p></p>", {
      text: task.val(),
      "class": "task"
    }).appendTo(cb[0].checked ? "#quadrant1" : "#quadrant2");
  });
  
  $("body").on("click", ".task", function() {
    $(this).slideUp(500, function(){ $(this).remove(); });
  });  
});

div { border: thin black solid; margin: 4px; min-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Task: <input id="task"></label>
<label><input type="checkbox" id="important"> Important</label>
<button>Add</button>
<div id="quadrant1"></div>
<div id="quadrant2"></div>

JS：定位并删除动态添加的元素

4 个答案: