Question

这是我的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属性值带到p的{{1}}元素。

我想id="pp"引用有问题。我不想写相同的代码5次，所以我尝试使用使用运算符启动我认为this引用引用了其他内容。

Answer 1

处理程序this内的

引用了dom元素，它没有.attr()方法，所以你需要使用$(this).attr('data-option')

获取该元素的jQuery包装器引用

$("[id^='option']").click(function () {
    $("#pp").html($(this).attr("data-option"));//since the attribute is `data-option` $(this).data("option") also will work
});

Answer 2

您可以使用原生JavaScript方法getAttribute()：

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

但是现在您已将其转换为实际数据属性，只需使用此类代码：

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

Answer 3

尝试：

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

的 DEMO FIDDLE

jQuery选择器与此引用

3 个答案: