Question

如果这个问题对您来说很神秘，那么请想象一下对我来说是怎么回事。我什至不知道要做什么。

无论如何，我正在做一个待办事项清单，并且几乎完成了其他所有工作，但是我应该这样做：

更新将项目添加到列表的点击代码，不仅要添加文本，还应添加文本区域和按钮。（我自己想出了 this 。）
提供此文本区域，然后按CLASS。（简单。）
在将文本区域和按钮以及待办事项文本添加到列表之后，现在可以为按钮提供单击处理程序。（等等，它已经没有了吗？）
此单击处理程序将获取textarea的值（来自步骤1），然后将其替换为现有项。（什么？）

是的，这对家庭作业有帮助；请不要把烂农产品扔给我。协作是允许的，只要不盲目地粘贴代码即可粘贴代码（即，我从网络上提取了一些东西，不得不问为什么它仍然不起作用）。

继续前进，我问老师他所要表达的意思：

我们有一个用于创建列表项的按钮，每个列表项都有一个按钮供您删除。但是我不知道任何“更新”按钮。为什么每个列表项已经是可更新的文本框时为什么需要额外的功能来替换文本？

他对他说：

之所以需要额外的更新功能，是因为文本框中的数据在JavaScript中不存在，仅存在于该文本框中，通过使更新按钮从文本框中拉出文本，我们现在可以在JavaScript中使用该文本。尽管我们的简单应用程序不保存任何数据，但是最好的做法是使数据往返JavaScript，即使我们的应用程序“不需要”它也是如此。 HTML和CSS实际上只是访问者可以与之交互的简单界面，而JavaScript是前端中数据处理的方式。

我知道答案只是几行简单的代码，因为我没有弄清楚自己会感到很愚蠢，但是我不想花很多时间在这么小的东西上，因为“忍耐会造就角色”。我怎样做才能使程序按指示工作？我该如何更好地快速解决自己的问题？

    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>To-Do List Front-End App</title>
  <meta name="description" content="A to-do list app.">
  <meta name="author" content="">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <style>
  /*vvvvvvvv CSS GOES BELOW THIS COMMENT vvvvvvvv*/

    #list-header {
        background-color: #e6e6fa;
    }

    #list-content {
        background-color: #bf94e4;
    }

  /*^^^^^^^^ CSS GOES ABOVE THIS COMMENT ^^^^^^^^*/
  </style>

</head>

<body>
  <!-- vvvvvvvv HTML GOES BELOW THIS COMMENT vvvvvvvv -->

  <div id="list-header">
    <h1>To-Do List</h1>
  </div>


  <div id="list-content">

    <form>
      <p>New Note: </p>
      <textarea id="new-note"></textarea>
    </form>

    <button id="submit-note">Create To-Do Item</button>

    <ul id="list">
    </ul>

  </div>

  <!-- ^^^^^^^^ HTML GOES ABOVE THIS COMMENT ^^^^^^^^ -->

  <script>
    /*global $*/
    /*vvvvvvvv JAVASCRIPT GOES BELOW THIS COMMENT vvvvvvvv*/

    $(document).ready(function () {
      $("#new-note").keypress(function (event) {   

        if (event.which == 13) { // Enters new list item when you press Return/Enter
            event.preventDefault();
            var noteText = $("#new-note").val();
            $("#list").append("<li>" + "<textarea class='notes'>" + noteText + "</textarea>" + " <button class='remove'>Delete</button></li>");

            $(".remove").click(function () { // Removes list item when you press the Delete button.
                $(this).parent().remove();
            });

            $("#new-note").val(""); // Blanks the text area when you enter an item.
        } // <- An IF statement, not a function

      });

      $("#submit-note").click(function () { // Enters a new list item when you click Create To-Do Item back in the HTML.
         var noteText = $("#new-note").val(); 
         $("#list").append("<li>" + "<textarea class='notes'>" + noteText + "</textarea>" + " <button class='remove'>Delete</button></li>");

         $(".remove").click(function () {  
           $(this).parent().remove();
         });

         $("#new-note").val(""); 

      });

    });

    /*^^^^^^^^ JAVASCRIPT GOES ABOVE THIS COMMENT ^^^^^^^^*/

  </script>
</body>
</html>

Answer 1

编辑

基于注释中更明确的要求。

您的＃1-添加一个文本区域，并添加一个更新按钮；
您的＃2-附加点击处理程序以更新按钮；
您的＃3-此处理程序将采用在步骤中创建的文本区域的值 1）;
附加步骤-让用户修改文本。
您的＃4-使用此值并替换现有的列表项文本；
您的＃5-更新应清空文本区域。

这是您需要的代码。

$(document).ready(function () {

  $("#new-note").keypress(function (event) {
    if (event.which == 13) {
      event.preventDefault();
      var noteText = $("#new-note").val();
      var listItem = "<li>" + noteText + " <button class='remove'>Delete</button><button class='update'>Update</button></li>";
      $("#list").append(listItem);
      $("#new-note").val("");
    }
  });

  $("#submit-note").click(function () {

    var noteText = $("#new-note").val();
    var listItem = "<li>" + noteText + " <button class='remove'>Delete</button><button class='update'>Update</button></li>";  // Your #1
    $("#list").append(listItem);
    $("#new-note").val("");
  });

  //
  // Button handlers using delegation (since those are dynamically created)
  //

  // REMOVE
  $("#list").on("click",".remove",function () {
    $(this).parent().remove();
  });

  // UPDATE
  $("#list").on("click",".update",function () {  // Your #2
    var thisListItem = $(this).parent();
    thisListItem.find("button").remove();
    var thisListText = thisListItem.text().trim();  // Your #3
    var newTextarea = $("<textarea>").text(thisListText);
    thisListItem.empty().append(newTextarea).append(" <button class='updateOk'>Ok</button>");  // Needs two append. One for the jquery object and one for a string
  });

  // UPDATE OK
  $("#list").on("click",".updateOk",function () {
    var thisListItem = $(this).parent();
    var thetextareaVal = thisListItem.find("textarea").val();
    thisListItem.empty().append(thetextareaVal + " <button class='remove'>Delete</button><button class='update'>Update</button>"); // Your #4
  });



}); // END ready

在上面的代码中，您将找到“您的#n” 1到4。＃5通过.empty()在用户操作前后的两个位置实现。

“额外步骤”发生在两个更新处理程序之间……因为这需要一个额外的“确定”按钮……这就是为什么它是2个处理程序。

关于事件处理程序的一切...
您正在处理动态创建的按钮，因此，再次...请确保至少至少阅读有关delegation的内容。

简短的委托（用我的话来说）：通常，代码在解析脚本时仅适用于现有元素（在DOM中）。解决这个大问题的唯一方法是委托...。这将在STATIC父项上附加 future元素所需的处理程序。结果是此静态元素将“分发”事件发生在其匹配子项上（如果有）。

在另一个中定义事件处理程序是不正确的做法。请立即停止该操作。如果您仍然这样做，因为它能起作用，那么……您迟早会遇到一些奇怪的行为，有时很难缩小范围。 Examples

并且永远不要循环处理程序定义。循环遍历HTML标记以添加并给它已经定义一次的类。 -一堂课，一位经理。一个类上的许多事件可以是一个处理程序。

除此之外，它仅用于获取/设置值以及替换/覆盖/创建元素。

可以在这里找到有效的演示：Your JsFiddle updated。

Answer 2

假设您的老师只是希望您通过单击按钮来获取textarea的值，则可以在javascript中执行类似的操作。我会让您考虑如何使用jQuery。

html

<textarea id="textarea">Blah blah blah</textarea>
<button id="btn">Get textarea</button>

JS

var textarea = document.getElementById('textarea');
var btn = document.getElementById('btn');

btn.addEventListener('click', function () {
    console.log(textarea.value);
})

// The better way to do it as requiring the user to click a button is just....rediculous
// but perhaps you haven't learned about events yet.
textarea.addEventListener('change', function (e) {
    console.log(e.target.value);
})

https://jsfiddle.net/jamesbrndwgn/f9zb5rm7/4/

如何在文本区域中创建更新功能？

2 个答案: