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 を持つ要素が表示されます。ただし、それらには data-point-value 属性が設定されていません。prop と attr の両方を使用してみましたが、どちらも属性を HTML に追加していません。

私は何を間違っていますか？

重要な場合、この要素は 4 つの 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/

ここに画像の説明を入力

whileattrはプロパティ要素を取得および設定し、それが何であるかに関係なく、常に文字列を返しますprop。get はブール条件です。次に例を示します。

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

$(elem).prop("checked")のブール値をtrue返します$(elem).attr("checked")が、文字列を返します"checked"

これは、値を設定する場合と同じです。

$(elem).prop("checked", true)チェックボックスを true としてマークしますが、使用するattrには と書く必要があります$(elem).attr("checked", "checked")。

これにより、コードが機能しない理由が明確にわかることを願っています...propメソッドで期待されるブール値を使用していますが、設定していないためです。

于 2013-08-01T22:56:49.807 に答える
0

ページを読み込んでソースを見ると、上記のリストに示されている名前と ID を持つ要素が表示されます。ただし、それらには data-point-value 属性が設定されていません。prop と attr の両方を使用してみましたが、どちらも属性を HTML に追加していません。

attrdata-*要素に属性を設定するために使用するのは正しいものでした。

「ソースの表示」などを使用して要素を表示している場合、クライアント側で行っている変更は表示されません。「ソースの表示」は、サーバーから配信されたページのソースを表示します (実際には、サーバーに戻ってページを再取得することがよくあります)。「ソースを表示」では、DOM の現在の状態は表示されません。ブラウザのライブDOM ビューアを使用する必要があります。Chrome、FireBug、および IE の Dev Tools では、これは通常「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);
    });
});

次に、 を持つ要素は value を持つ属性をid "bmsw"取得し、 を持つ要素は value を取得します。data-point-value"4"id "dp""1"

無償の完全な例:ライブ コピー| ライブソース

<!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 に答える