网页设计小妙招：巧用 jQuery 让列表实现数据交互

2023-09-18 07:32:50

简介

在网页设计中，我们经常需要使用循环来生成列表，例如，商品列表、新闻列表等。有时，我们需要让列表中的元素能够实现数据交互，例如，可以点击文本框进行编辑。本文将分享如何使用 jQuery 实现这一功能。

实现步骤

首先，我们需要在 HTML 中创建列表元素，例如：

<ul>
  <li>商品名称：<input type="text" id="product-name"></li>
  <li>商品价格：<input type="text" id="product-price"></li>
</ul>

然后，我们需要在 JavaScript 中使用 jQuery 来操作列表元素。例如，我们可以使用以下代码来获取列表中所有文本框的值：

var productNames = [];
var productPrices = [];

$("#product-list input[type='text']").each(function() {
  if ($(this).attr("id") == "product-name") {
    productNames.push($(this).val());
  } else if ($(this).attr("id") == "product-price") {
    productPrices.push($(this).val());
  }
});

接下来，我们可以使用以下代码来设置列表中所有文本框的值：

$("#product-list input[type='text']").each(function(index) {
  if ($(this).attr("id") == "product-name") {
    $(this).val(productNames[index]);
  } else if ($(this).attr("id") == "product-price") {
    $(this).val(productPrices[index]);
  }
});

最后，我们需要在 HTML 中添加一个按钮，用于触发数据交互操作。例如：

<button type="button" id="submit-button">提交</button>

在 JavaScript 中，我们可以使用以下代码来为按钮添加点击事件：

$("#submit-button").click(function() {
  // 在这里执行数据交互操作
});

示例代码

<!DOCTYPE html>
<html>
<head>
  
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function() {
      var productNames = [];
      var productPrices = [];

      $("#product-list input[type='text']").each(function() {
        if ($(this).attr("id") == "product-name") {
          productNames.push($(this).val());
        } else if ($(this).attr("id") == "product-price") {
          productPrices.push($(this).val());
        }
      });

      $("#submit-button").click(function() {
        alert("商品名称：" + productNames.join(", ") + "\n商品价格：" + productPrices.join(", "));
      });
    });
  </script>
</head>
<body>
  <ul id="product-list">
    <li>商品名称：<input type="text" id="product-name"></li>
    <li>商品价格：<input type="text" id="product-price"></li>
  </ul>
  <button type="button" id="submit-button">提交</button>
</body>
</html>