0

カスタム要素の値を取得するためにを使用することは避けてい$(this).attr()ます。カスタム要素が必要な場合は、接頭辞を付けて、その要素のコンテンツにアクセスするためにdata-使用$(this).data()する必要があることを読みました（私の場合は動的に入力されます）。要素は一連の動的要素の一部であるため、要素に追加します）

私の質問はかなり単純です。

<a id="' + node.Id + '" data-currentValue='+node.Name+' class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes($(this).data(\'currentValue\'), $(this).attr(\'id\'));"</a>

値をキャプチャした後、コンソールに値を記録しましたが、当然のことながら、$(this).data()パーツは未定義を返し（値はこのテストされたケースの場合"asdf"）、idは期待した値を返します（私の場合は2000046）。

この要素の何が問題になっていますか？どこで問題が発生したかを特定できず、なぜ未定義がスローされるのかわかりません。また、内の値が必要ですdata-currentValue。必要な価値を得ることができるように共有するアイデアや洞察はありdata-currentValueますか？

全体としての動的要素：

    $("#tblAttributes tbody").empty();
    var tableContents = [];
    $.each(data.KeyValuePairs, function (i, node) {
        tableContents[tableContents.length] = '<tr>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<p>';
        tableContents[tableContents.length] = node.Name;
        tableContents[tableContents.length] = '</p>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<span class="button-group compact">';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" data-currentValue='+node.Name+' class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes($(this).data(\'currentValue\'), $(this).attr(\'id\'));"</a>';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button red-gradient icon-trash with-tooltip confirm" href="javascript:DeleteAttribute('+node.Id+');" title="Delete" </a>';
        tableContents[tableContents.length] = '</span>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '</tr>';
    });
    $("#AttributeCount").html(data.KeyValuePairs.length);
    $("#tblAttributes tbody").append(tableContents.join(""));

編集

したがって、私が念頭に置いていたこのアプローチは不器用で面倒でした（.data（）がすべてをプリミティブ型に変換しようとすることをBlazeMongerが確認したおかげで、必要な情報にアクセスする代わりに連想配列を使用するようにコードを変更しました。要素にカスタム属性はもう必要ありません。

var attributes = {}; //associative array declared globally
...


$("#tblAttributes tbody").empty();
    var tableContents = [];
    attributes = {};
    $.each(data.KeyValuePairs, function (i, node) {
        attributes[node.Id] = node; //associating the node's id with the node for future use
        tableContents[tableContents.length] = '<tr>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<p>';
        tableContents[tableContents.length] = node.Name;
        tableContents[tableContents.length] = '</p>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '<td>';
        tableContents[tableContents.length] = '<span class="button-group compact">';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button icon-pencil with-tooltip" href="javascript:void(0);" title="Edit" onclick="UpdateAttributes(' + node.Id +');"</a>';
        tableContents[tableContents.length] = '<a id="' + node.Id + '" class="button red-gradient icon-trash with-tooltip confirm" href="javascript:DeleteAttribute('+node.Id+');" title="Delete" </a>';
        tableContents[tableContents.length] = '</span>';
        tableContents[tableContents.length] = '</td>';
        tableContents[tableContents.length] = '</tr>';
    });
...
        function UpdateAttributes( attrId) {
        console.log(attributes[attrId].Name); //now I can access the information I needed which was to be stored as a custom attribute in the <a> element.
4

1 に答える 1

2

このメソッドは、ページの読み込み時にHTML属性を1回.data()取得します。data-その後、data-属性を変更できますが、によって取得されるものは変更されませんdata()。

代わりに、を使用して、取得する.data(name,value)新しい値を設定します。（これによってHTML属性が同時に.data(name)変更されることはないことにも注意してください。どちらか一方を変更できます。）data-

data-jQueryが現在の属性を一度に変数に自動的にプルする方法があると便利かもしれませんがdata()、jQuery 1.9の時点では、そのような組み込み機能は存在しません。ただし、書くのは難しいことではありません。

http://api.jquery.com/data/

于 2013-03-26T13:56:52.213 に答える