-1

これは私のHTMLです：

<div class="btn-group  btn-group-justified"> 
     <a id="option1" data-option="1" class="btn btn-default" href="#">3</a>
     <a id="option2" data-option="2" class="btn btn-default" href="#">6</a>
     <a id="option3" data-option="3" class="btn btn-default" href="#">9</a>
     <a id="option4" data-option="4" class="btn btn-default" href="#">12</a>
     <a id="option5" data-option="5" class="btn btn-default" href="#">15</a>
</div>

    <p id="pp"></p>

そして私のjQuery：

$("[id^='option']").click(function () {
    $("#pp").html(this.attr("data-option"));
});

コードは、問題を簡単に指摘できるように単純化されています。

私がやりたいのは、クリックされた要素の属性値を で要素に取得するdata-optionことaです。pid="pp"

参照に何か問題があるthisと思います。同じコードを 5 回も書きたくないので、starts with 演算子を使用しようとしthisました。

4

3 に答える 3

5

ハンドラー内でthisは dom 要素を.attr()参照します。メソッドがないため、その要素の jQuery ラッパー参照を取得する必要があります。$(this).attr('data-option')

$("[id^='option']").click(function () {
    $("#pp").html($(this).attr("data-option"));//since the attribute is `data-option` $(this).data("option") also will work
});
于 2013-09-16T13:55:35.990 に答える
1

ネイティブの JavaScript メソッドを使用できますgetAttribute()。

$("[id^='option']").click(function () {
    $("#pp").html(this.getAttribute("data"));
});

ただし、実際のデータ属性にしたので、代わりにそのようなコードを使用してください。

$("[id^='option']").click(function () {
    var oClickedItem = $(this);
    $("#pp").html(oClickedItem.data("option"));
});
于 2013-09-16T13:55:53.927 に答える
0

試す：

$(document).ready(function(){
    $("[id^='option']").click(function(){
        $("#pp").html($(this).attr("data"));
    });
});

DEMO FIDDLE

于 2013-09-16T13:56:50.957 に答える