-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属性值获取到具有.apid="pp"

this我猜参考有问题。我不想将相同的代码写 5 次，所以我尝试使用以运算符开头的操作，我认为this引用指的是别的东西。

4

3 回答 3

5

inside the handler this refers to the dom element, it does not have .attr() method so you need to get the jQuery wrapper reference for that element using $(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

You can use the native JavaScript method getAttribute():

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

However now that you made it into actual data attribute, simply use such code instead:

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

Try:

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

DEMO FIDDLE

于 2013-09-16T13:56:50.957 回答