jQuery選擇了與參考

-1

<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元素與id="pp"。

有什麼不對this參考我猜。我不想寫同樣的代碼5次，所以我試圖用開始運營商我認爲this引用指的是別的東西。

來源

2013-09-16 zkanoca

使用'$（本）的''而不是this' – letiagoalves

沒有「數據」屬性。數據屬性以'data-'開頭，後面跟着至少一個字符。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-* – j08691

@ j08691我學到了一些新東西。謝謝。 – zkanoca

處理程序this內指的是DOM元素，它沒有.attr()方法，所以你需要使用$(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-16 13:55:35

@ÖzkanÖZLÜ，因爲屬性是'data-option' $（this）.data（「option」）也可以工作 –

您可以使用本地JavaScript方法getAttribute()獲得該元素的jQuery的包裝參考：

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

但是現在你把它做成實際的數據屬性，簡單地使用這樣的代碼來代替：

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

來源

2013-09-16 13:55:53

嘗試：

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

DEMO FIDDLE

來源

2013-09-16 13:56:50 Unknown

jQuery選擇了與參考

回答

相關問題