Question

我的网站上有很多按钮。每一个都有一个标题属性。我想将标题属性中的文本插入到按钮文本中，作为按钮文本下方的一行，就像标题一样。

有关我的按钮的示例，请参见下文。

<button class="btn" title="Title Text 1">Button Text 1</button>
<button class="btn" title="Title Text 2">Button Text 2</button>
<button class="btn" title="Title Text 3">Button Text 3</button>

我想知道是否有一种方法来获取“标题属性”文本并将其附加到“按钮文本”，这样我就不必手动更新所有按钮。

我尝试过类似的事情：

var title = $( "button" ).attr( "title" );
$( "div" ).text( title );

但是.attr()仅从第一个Button元素获取Title属性，其余的都不获取。

非常感谢。

Answer 1

使用each遍历每个.btn。例如，如果要将标题文本附加到现有按钮上：

$('.btn').each(function() {
  $(this).text( $(this).text() + ' --- ' + $(this).prop('title') );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" title="Title Text 1">Button Text 1</button>
<button class="btn" title="Title Text 2">Button Text 2</button>
<button class="btn" title="Title Text 3">Button Text 3</button>

Answer 2

您绝对不需要jQuery。实际上，您甚至不需要JavaScript

button[title]:after {
  content: attr(title);
  display: block;
}

<button class="btn" title="Title Text 1">Button Text 1</button>
<button class="btn" title="Title Text 2">Button Text 2</button>
<button class="btn" title="Title Text 3">Button Text 3</button>

如果您仍然热衷于JS解决方案，请参见下面的示例，该示例迭代每个<button>（具有title属性）并附加包含{{1 }}属性文字。

<div>

title

参考文献：

Answer 3

这是您要找的吗？

$("button").attr('title', function(i, v) {
  $(this).siblings(".title").html(v);
})

.group {
  display: inline-block;
}

.btn {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <button class="btn" title="Title Text 1">Button 1</button>
  <span class="title"></span>
</div>
<div class="group">
  <button class="btn" title="Title Text 2">Button 2</button>
  <span class="title"></span>
</div>
<div class="group">
  <button class="btn" title="Title Text 3">Button 3</button>
  <span class="title"></span>
</div>

从多个按钮获取标题属性

3 个答案: