如何使用jQuery将子元素的属性作为父元素的文本内容

你的核心问题在于当前代码会把所有.button元素的文本都改成同一个值——这是因为$('.button').text(textAt)会选中页面上所有class为button的元素。要实现每个父元素只获取自身子元素的data-text，关键是要针对当前的父元素进行操作，而不是全局修改。

修正后的实现方案 #

根据你的使用场景，分两种常见情况给出代码：

1. 页面加载时自动填充文本

如果希望页面加载完成后就把所有按钮的文本设置好，可以用each()遍历每个按钮：

$(document).ready(function() {
  // 遍历每个.button元素，$(this)指代当前正在处理的按钮
  $('.button').each(function() {
    // 获取当前按钮下子svg的data-text属性
    const textContent = $(this).children('svg.liquid-button').attr('data-text');
    // 把文本设置给当前这个按钮
    $(this).text(textContent);
  });
});

2. 触发事件时（比如点击）填充文本

如果需要在用户点击按钮时才替换文本，就给按钮绑定点击事件：

$(document).ready(function() {
  $('.button').on('click', function() {
    // 同样用$(this)获取当前点击的按钮
    const textContent = $(this).children('svg.liquid-button').attr('data-text');
    $(this).text(textContent);
  });
});

关键优化说明 #

• 用$(this)来指代当前操作的父元素（也就是单个.button），这样每个按钮只会读取自己子元素的data-text，不会干扰其他按钮。
• 如果你担心有些按钮可能没有子svg，可以加个判断避免设置undefined：

  $('.button').each(function() {
    const $targetSvg = $(this).children('svg.liquid-button');
    if ($targetSvg.length > 0) {
      const textContent = $targetSvg.attr('data-text');
      $(this).text(textContent || '默认文本');
    }
  });
  

你的原始代码参考 #

HTML结构（增加一个按钮示例，更直观展示多元素效果）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="button">
    <svg class="liquid-button" data-text="See Projects">
    </svg>
</a>
<a class="button">
    <svg class="liquid-button" data-text="Contact Me">
    </svg>
</a>

CSS样式（补充文本样式让内容更明显）：

.button {
    background-color: #8d49f9;
    border-radius: 100px;
    padding: 15px;
    width: 250px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}

内容的提问来源于stack exchange，提问作者Diced Mango