如何找到錨標籤的自定義屬性的值？

Question

我有一個具有兩個自定義屬性的錨點。帶星號的那個稍後添加。

的HTML代碼如下：

<ul class="dropdown"> 
     <li class="orange"><a href="#" data-jumpslide="2" **goto-page="newpage"**><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">When to do it</div><div class="clear"></div></div></a></li> 
     <li class="orange"><a href="#" data-jumpslide="3" **goto-page="newpage"**><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Key faces</div><div class="clear"></div></div></a></li> 
     <li class="orange"><a href="#" data-jumpslide="5" **goto-page="newpage"**><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Functionalities</div><div class="clear"></div></div></a></li> 
</ul> 

我想這個新添加的自定義屬性的在下面的jQuery代碼值。由於某種原因，attr不起作用。

你有任何想法如何它可能工作：

$('a[data-jumpslide]').each(function(idx, ele){ 
    $(ele).on('click', function(){ 
     alert($(this).data("goto-page")); 
     var slideToJump = $(this).data('jumpslide'); 
     window.slider.go(false, slideToJump+1); 
    }); 
}); 

感謝。

Answer 1

爲了這個工作你的HTML的屬性應與data-開始：

<ul class="dropdown"> 
     <li class="orange"><a href="#" data-jumpslide="2" data-goto-page="newpage"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">When to do it</div><div class="clear"></div></div></a></li> 
     <li class="orange"><a href="#" data-jumpslide="3" data-goto-page="newpage"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Key faces</div><div class="clear"></div></div></a></li> 
     <li class="orange"><a href="#" data-jumpslide="5" data-goto-page="newpage"><div class="list-item one-liner"><div class="left"><span id="functionality-icon"></span></div> <div class="right">Functionalities</div><div class="clear"></div></div></a></li> 
</ul> 

那麼你的jQuery可以檢索值就好：

$('a[data-jumpslide]').each(function(idx, ele){ 
    $(ele).on('click', function(){ 
     alert($(this).data("goto-page")); 
     var slideToJump = $(this).data('jumpslide'); 
     window.slider.go(false, slideToJump+1); 
    }); 
}); 

Answer 2

這裏有一個的jsfiddle顯示警報的.attr值：http://jsfiddle.net/Ndpfd/

看起來像問題是你用ele inste廣告this。

Answer 3

如果你不想要的數據前綴，你可以這樣做：

http://jsbin.com/etebil/1/edit

$('a[data-jumpslide]').each(function(idx, ele){ 
    $(ele).on('click', function(){ 
     alert($(this).attr("goto-page")); 
     var slideToJump = $(this).data('jumpslide'); 
     window.slider.go(false, slideToJump+1); 
    }); 
}); 

Answer 4

使用.attr方法。

$('a[data-jumpslide]').each(function(idx, ele){ 
    $(ele).on('click', function(){ 
     alert($(this).attr("goto-page")); 
     var slideToJump = $(this).data('jumpslide'); 
     window.slider.go(false, slideToJump+1); 
    }); 
}); 

見http://jsfiddle.net/