📌  相关文章
📜  如何使用带有关闭事件的 jQuery 预先添加列表项？(1)

📅  最后修改于: 2023-12-03 15:08:26.359000             🧑  作者: Mango

如何使用带有关闭事件的 jQuery 预先添加列表项？

在Web开发中，列表项经常被用来展示一系列数据。这些数据可能需要在页面加载时就预先添加到列表中，同时需要有一个关闭事件来让用户有更多的交互性。本文将介绍如何使用 jQuery 在预先添加列表项时添加关闭事件，让用户能够更轻松地浏览和管理列表中的数据。

准备工作

在使用 jQuery 之前，需要将它引入到你的 HTML 文件中。你可以从 jQuery 官网 下载它，或直接引入一个网络上的版本。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <ul id="my-list">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </body>
</html>

在本例中，我们已经有一个包含两个列表项的列表。接下来，我们使用 jQuery 为这个列表添加一个输入框和一个按钮，通过用户的输入来添加新的列表项。

$(document).ready(function() {
  // 获取元素
  var input = $("<input>").attr("type", "text");
  var button = $("<button>").text("Add");

  // 添加元素到页面中
  $("#my-list").after(input, button);

  // 给按钮添加点击事件
  button.click(function() {
    // 获取输入框中的值
    var value = input.val();

    // 添加新的列表项
    $("#my-list").append("<li>" + value + "</li>");

    // 清空输入框
    input.val("");
  });
});

现在我们已经预先添加了一个输入框和一个添加按钮，用户可以使用它们来添加新的列表项。不过，我们还需要为列表项添加关闭事件。

添加关闭事件

添加关闭事件需要为列表项预先添加一个“关闭”按钮，然后给它添加一个点击事件。在这个点击事件中，我们可以找到对应的列表项并从列表中删除它。

为了实现这个功能，我们需要修改之前的代码，让它能够为预先添加的列表项添加关闭按钮和关闭事件。

$(document).ready(function() {
  // 创建输入框和添加按钮
  var input = $("<input>").attr("type", "text");
  var button = $("<button>").text("Add");

  // 将输入框和添加按钮添加到页面中
  $("#my-list").after(input, button);

  // 为添加按钮添加点击事件
  button.click(function() {
    // 获取输入框中的值
    var value = input.val();

    // 添加新的列表项，并为它添加关闭按钮
    var li = $("<li>").text(value);
    var close = $("<span>").text("X").addClass("close");
    li.append(close);
    $("#my-list").append(li);

    // 清空输入框
    input.val("");
  });

  // 为列表中的关闭按钮添加点击事件
  $(document).on("click", ".close", function() {
    // 找到对应的列表项并删除它
    $(this).parent().remove();
  });
});

在这个例子中，我们预先为新添加的列表项添加了一个带有“X”字母的关闭按钮。当用户单击这个按钮时，我们找到它所属的列表项并从列表中删除它。

我们使用了 .on() 函数来添加关闭事件。在这个函数中，我们将 .close 选择器作为第二个参数传入，以便为所有匹配的元素添加点击事件。这样，即使后来添加的元素也能够响应这个事件。

总结

在本文中，我们介绍了如何使用 jQuery 在预先添加列表项时添加关闭事件。首先，我们为输入框和添加按钮添加了一个点击事件。当用户单击添加按钮时，我们创建一个新的列表项，并在它上面添加了一个关闭按钮。然后，我们使用 .on() 函数为所有的关闭按钮添加了一个点击事件。当用户单击关闭按钮时，我们找到它所属的列表项并从列表中删除它。通过这样的方式，我们能够让用户有更多的交互性，更轻松地浏览和管理列表中的数据。