0

我有一个带有两个自定义属性的锚。带有星号的那个是稍后添加的。

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);
    });
});

谢谢。

4

4 回答 4

5

为了使它起作用，您的 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);
    });
});
于 2013-04-25T21:42:52.500 回答
1

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

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);
    });
});
于 2013-04-25T21:44:10.530 回答
0

这是一个显示值警报的 JSFiddle ：http .attr: //jsfiddle.net/Ndpfd/

看起来问题是您使用ele而不是this.

于 2013-04-25T21:43:57.107 回答
0

使用 .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/

于 2013-04-25T21:44:31.277 回答