Question

我制作了一个自定义属性，为每个链接添加标题。

<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

这是jQuery代码

$('#ex1,#ex2').append('<span class="title">'+$(this).attr("nameOf")+'</span>');

但链接显示为未定义。我该如何解决这个问题。

Answer 1

迭代元素标签＆amp;附加到它

＆＃13;

$('a').each(function(i, v) {
  $(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

＆＃13;

Answer 2

您可以使用循环实现与以下相同：

$('[nameOf]').each(function(){
    $(this).append('<span class="title">' + $(this).attr("nameOf") + '</span>')
});

但根据w3c规则，您无法在nameOf代码中使用a属性，因此您可以使用data-nameof代替。

Answer 3

在HTML中，您无法在驼峰情况下创建自定义属性。如果要向自定义attr添加更多单词，则需要添加-符号。所以，对于你的情况，做。

<a href="#" name-of="The Flower" id="ex1"></a>

稍后，对于搜索，我建议您使用驼峰案例。

$(element).attr('nameOf');

Answer 4

示例中的this是窗口，它不知道它应该是对链接的引用。为了使用它，你需要使用append（）内部的函数并返回字符串。

$('#ex1,#ex2').append( function() { return '<span class="title">'+$(this).attr("nameOf")+'</span>'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

如果您根本不想使用JavaScript并且文本显示在链接中，那么总会有一个CSS解决方案。

a[nameOf]::before {
  content: attr(nameOf)
}

<a href="#" nameOf="The Flower" id="ex1"></a>
<a href="#" nameOf="The Tree" id="ex2"></a>

自定义属性不起作用

4 个答案: