來自帶有jquery的活動類的html5數據屬性

Question

我試圖使用jQuery從一個選定類的元素中獲取html5 data-sku =“002”。

理想情況下，如果data-sku =“002”並且具有選定的類，則設置變量。 然后我可以使用if / else或show（）/ hide（）來啟用或禁用我的頁面上的其他元素。

<li data-sku="002" data-id="1590" data-price="120"
data-label="You have selected: Premium" class="selected">
    <span class="price"><sup>€</sup>120</span>
        <span class="title-plan">Premium
            <span><p>Premium Package</p>
            </span>
        </span>
  <a href="#" class="btn btn-submit-price-plan select-plan">Select</a>
<div class="clearfix"></div>
</li>

我在jsfiddle上做了一個例子http://jsfiddle.net/gkrrbnyy/2/但是我在黑暗中拍攝了一下。

有關最佳方法的任何想法嗎？ 因為我對jquery不是很有經驗。

Answer 1

如果我理解你想要：

jQuery('.selected').data('sku')

例如：

jQuery(".select-plan").click(function(){
    alert('Selectecd sku is: '+jQuery('.selected').data('sku'));
});

JSFiddle： http ： //jsfiddle.net/cbhsnqeg/1/ （更新）

這就是為什么： https ： //api.jquery.com/data/

你也可以使用jQuery(".select-plan").attr('data-sku') 。

Answer 2

嘗試用jQuery(".selected[data-sku=002]").text()替換jQuery(".selected[data-sku=002]").text()用於jQuery(".selected").find('[data-sku=002]').text() ; .selected具有data-*屬性，而不是.selected子節點， .find()遍歷

http://jsfiddle.net/gkrrbnyy/4/

Answer 3

你可以用它

$(".select-plan").click(function() {
  // gives the element that has class=selected and data-sku='002'   
  temp = $(".selected[data-sku=002]") 
    //$(temp).data('sku') gives the value of the element's attribute 
    //data-sku
  $("#myID").html($(temp).data('sku')); 
});

演示

Answer 4

選擇器.selected[data-sku=002]可用於查找具有兩者的元素。

演示

jQuery(".select-plan").click(function(){
    mfvariable = jQuery(".selected[data-sku=002]").length;
    if( mfvariable > 0 )
        alert('Exists');
    else
        alert('Not found');
});