如何找到Anchor标记的自定义属性的值？

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

如果不需要数据前缀，可以这样做：

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 3

下面是一个JSFiddle，它显示了.attr值的警报：http://jsfiddle.net/Ndpfd/

看起来问题在于您使用的是ele而不是this。