基于列表项slug属性自动生成带主链接前缀的链接实现问题

嘿，这个需求很容易搞定！你想要的是把每个带jstree类的列表项里的<a>标签，自动或者通过点击按钮替换成「主链接前缀 + slug属性值」的完整URL，同时清理掉列表项上多余的slug和src属性对吧？我给你写个具体的实现方案：

第一步：调整HTML结构（可选添加触发按钮） #

如果需要点击按钮生成链接，先给页面加个按钮；如果想页面加载完成就自动生成，这步可以跳过按钮部分：

<!-- 可选：点击触发的按钮 -->
<button id="generateLinksBtn">生成完整链接</button>

<ul class="linktree">
  <li class="jstree" slug="link-1.html" src="1"><a href="#">Link Text 1</a></li>
  <li class="jstree" slug="link-2.html" src="1"><a href="#">Link Text 2</a></li>
  <li class="jstree" slug="link-3.html" src="1"><a href="#">Link Text 3</a></li>
</ul>

第二步：编写JavaScript逻辑 #

下面的代码既支持页面加载自动执行，也支持点击按钮触发，你可以根据需求灵活选择：

// 定义你的主链接前缀
const masterLink = 'http://google.com';

// 封装生成完整链接的核心函数
function generateFullLinks() {
  // 获取所有带有jstree类的列表项
  const treeItems = document.querySelectorAll('.jstree');
  
  // 遍历每个列表项处理链接
  treeItems.forEach(item => {
    // 取出当前项的slug属性值
    const slug = item.getAttribute('slug');
    if (!slug) return; // 如果没有slug属性，直接跳过
    
    // 拼接完整的链接地址
    const fullLink = `${masterLink}/${slug}`;
    
    // 找到列表项里的a标签，设置它的href属性
    const linkElement = item.querySelector('a');
    if (linkElement) {
      linkElement.href = fullLink;
    }
    
    // 移除列表项上不需要的slug和src属性
    item.removeAttribute('slug');
    item.removeAttribute('src');
  });
}

// 方式1：页面加载完成后自动生成链接
document.addEventListener('DOMContentLoaded', generateFullLinks);

// 方式2：点击按钮时生成链接（如果添加了按钮的话）
const generateBtn = document.getElementById('generateLinksBtn');
if (generateBtn) {
  generateBtn.addEventListener('click', generateFullLinks);
}

效果说明 #

执行这段代码后，你的列表就会变成你想要的样子：

<ul class="linktree">
  <li class="jstree"><a href="http://google.com/link-1.html">Link Text 1</a></li>
  <li class="jstree"><a href="http://google.com/link-2.html">Link Text 2</a></li>
  <li class="jstree"><a href="http://google.com/link-3.html">Link Text 3</a></li>
</ul>

你可以根据自己的需求，选择只保留自动执行或者点击触发的逻辑，两种方式可以单独使用也可以同时存在哦~

备注：内容来源于stack exchange，提问作者Ale Benitez