0

我正在尝试通过以下代码向我的输入元素添加一个属性：

$(document).ready(function(e) {
    $.each({
        "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
        "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
        "swrv": 1, "ud": 1
    }, function(key, value) {
        $('#' + key).prop('data-point-value', value);
    });
});

如果我加载我的页面并查看源代码，我会看到上面列表中显示的名称和 ID 的元素。但是，它们没有设置数据点值属性。我试过同时使用 prop 和 attr 但他们都没有看到将属性添加到 HTML。

我究竟做错了什么？

如果重要的话，这个元素是四个 div、一个表单、一个表格和一个 td 元素。

4

3 回答 3

1

在下面使用：

$('#' + controlID).attr('data-controlValue', value);

或者，

$('#' + controlID).data('controlValue', value);

我希望它有所帮助。

于 2013-08-01T23:14:45.650 回答
0

利用

$('#' + key).attr('data-point-value', value);

这是一个演示：http: //jsfiddle.net/balexandre/uKw25/

在此处输入图像描述

而attr获取和设置属性元素，独立于它是什么，并且总是返回一个字符串，propget 是一个布尔条件，例如：

<input type="checkbox" value="Yes" checked />

$(elem).prop("checked")将返回布尔值truewhile$(elem).attr("checked")将返回字符串"checked"

设置值时也是如此：

$(elem).prop("checked", true)会将复选框标记为 true，但要使用attr您需要编写$(elem).attr("checked", "checked").

我希望这能让您清楚地了解为什么您的代码无法正常工作......因为您正在使用prop但没有像方法所期望的那样设置任何布尔值。

于 2013-08-01T22:56:49.807 回答
0

如果我加载我的页面并查看源代码，我会看到上面列表中显示的名称和 ID 的元素。但是，它们没有设置数据点值属性。我试过同时使用 prop 和 attr 但他们都没有看到将属性添加到 HTML。

attr是用来设置data-*元素属性的正确方法。

如果您使用“查看源代码”或类似方式查看元素，则您在客户端所做的更改将不会显示。“查看源代码”显示从服务器传递的页面源代码（实际上，它经常返回服务器并重新检索页面）。“查看源代码”不会向您显示 DOM 的当前状态。您需要使用浏览器的实时DOM 查看器。在 Chrome、FireBug 和 IE 的开发工具中，这通常是“DOM”选项卡或类似选项卡。

如果您attr在代码中使用：

$(document).ready(function(e) {
    $.each({
        "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
        "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
        "swrv": 1, "ud": 1
    }, function(key, value) {
        $('#' + key).attr('data-point-value', value);
    });
});

然后带有 的元素id "bmsw"将获得带有 value 的data-point-value属性，带有"4"的元素id "dp"将获得 value "1"，依此类推。

免费完整示例：Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Setting Data Attributes</title>
  <style>
    span {
      border: 1px solid grey;
      padding: 0 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>Each of the below is an element with an <code>id</code> matching its text. Click the element to see the value of its <code>data-point-value</code> attribute.</p>
  <p>
    <span id="bmsw">bmsw</span>
    <span id="dp">dp</span>
    <span id="jmsw">jmsw</span>
    <span id="mhsw">mhsw</span>
    <span id="mp">mp</span>
    <span id="pr">pr</span>
    <span id="prrv">prrv</span>
    <span id="sh">sh</span>
    <span id="st">st</span>
    <span id="sw">sw</span>
    <span id="swrv">swrv</span>
    <span id="ud">ud</span>
  </p>
  <p id="output"></p>
  <script>
    (function() {
      $(document).ready(function(e) {
          $.each({
              "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
              "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
              "swrv": 1, "ud": 1
          }, function(key, value) {
              $('#' + key).attr('data-point-value', value);
          });
      });

      $(document).on("click", "span", function() {
        var value = $(this).attr("data-point-value");
        $("#output").html(
          "The value of <code>" +
          this.id +
          "</code>'s <code>data-point-value</code> is <code>" +
          value +
          "</code>"
        );
      });
    })();
  </script>
</body>
</html>
于 2013-08-02T09:09:18.520 回答