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

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

问题是您使用ele代替this。

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/

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

4 个答案: