英文:
How to change a href into bootstrap button with javascript
问题
let downloadLinks = document.querySelectorAll('a[href*="pluginfile.php"]');
// 选择所有包含 "pluginfile.php" 的链接
downloadLinks.forEach(link => {
let newLink = document.createElement('a');
newLink.href = link.href;
newLink.target = '_blank';
newLink.className = 'btn btn-outline-primary';
newLink.innerHTML = '<i class="fa fa-download"></i>';
link.parentNode.replaceChild(newLink, link);
});
// 对每个链接进行替换
这是你提供的代码的翻译部分，用于将自动生成的链接转换成带有Bootstrap按钮和Font Awesome图标的链接。
英文:
I have a automatically generated table with lots of links like:
<a href="https:/.../pluginfile.php/...">Some random Text</a>
I want all those links to be a bootstrap button with font awesome like this:
<a href = "https:/.../pluginfile.php/..."
target = "_blank"
class = "btn btn-outline-primary" >
<i class="fa fa-download"></i>
</a>
this is what I came up with from google:
let downloadlink = document.querySelectorAll('a[href*="pluginfile.php"]');
// All Links with ...pluginfile.php...
let downloadbutton = document.createElement('a');
// This might also help (from google):
downloadbutton.innerHTML = '<i class="fa fa-download"></i>';
I have no clue how to piece those snippets together and fill in whats missing. I'd appreciate any help.
答案1
得分: 2
只需使用循环来遍历所有链接并在需要时插入/删除/修改。
// 获取包含"pluginfile.php"的href属性的<a>标签
const targetLinks = document.querySelectorAll(`a[href*="pluginfile.php"]`);
// 循环遍历targetLinks以分别处理每个<a>标签
for (let i = 0; i < targetLinks.length; i++) {
// 获取当前<a>标签的内容
const originalContent = targetLinks[i].textContent;
// 设置Bootstrap类
targetLinks[i].setAttribute("class", "btn btn-outline-primary");
// 设置目标操作
targetLinks[i].setAttribute("target", "_blank");
// 添加fontAwesome图标和原始内容
// 如果不需要保留内容，可以从下面的代码中删除${originalContent}
targetLinks[i].innerHTML = `<i class="fa fa-download"></i>${originalContent}`;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a href="https://first/pluginfile.php/...">Random Text A</a>
<a href="https://second/pluginfile.php/...">Random Text B</a>
<a href="https://third/pluginfile.php/...">Random Text C</a>
<a href="https://forth/pluginfile.php/...">Random Text D</a>
<a href="https://fifth/pluginfile.php/...">Random Text E</a>
<a href="https://sixth/pluginfile.php/...">Random Text F</a>
<a href="https://seventh/pluginfile.php/...">Random Text G</a>
<a href="https://eighth/pluginfile.php/...">Random Text H</a>
<a href="https://ninth/pluginfile.php/...">Random Text I</a>
<a href="https://tenth/pluginfile.php/...">Random Text J</a>
<a href="https://google.com">This should not be bootstrapped 1</a>
<a href="https://example.org">This should not be bootstrapped 2</a>
<a href="https://example.net">This should not be bootstrapped 3</a>
英文:
Just use a loop to go through all links and insert/delete/amend whenever needed.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
//Getting <a> tags with href that contains "pluginfile.php"
const targetLinks = document.querySelectorAll(`a[href*="pluginfile.php"]`);
//Loop through targetLinks to target each <a> tag respectively
for(let i=0; i<targetLinks.length ;i++){
//Get the current <a> tag's content
const originalContent = targetLinks[i].textContent;
//Setting bootstrap classes
targetLinks[i].setAttribute("class", "btn btn-outline-primary");
//Setting target action
targetLinks[i].setAttribute("target", "_blank");
//Adding fontAwesome Icon and the original content
//You may remove ${originalContent} from below code if you dont need to remain the content
targetLinks[i].innerHTML = `<i class="fa fa-download"></i>${originalContent}`
}
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<a href="https://first/pluginfile.php/...">Random Text A</a>
<a href="https://second/pluginfile.php/...">Random Text B</a>
<a href="https://third/pluginfile.php/...">Random Text C</a>
<a href="https://forth/pluginfile.php/...">Random Text D</a>
<a href="https://fifth/pluginfile.php/...">Random Text E</a>
<a href="https://sixth/pluginfile.php/...">Random Text F</a>
<a href="https://seventh/pluginfile.php/...">Random Text G</a>
<a href="https://eighth/pluginfile.php/...">Random Text H</a>
<a href="https://ninth/pluginfile.php/...">Random Text I</a>
<a href="https://tenth/pluginfile.php/...">Random Text J</a>
<a href="https://google.com">This should not be bootstrapped 1</a>
<a href="https://example.org">This should not be bootstrapped 2</a>
<a href="https://example.net">This should not be bootstrapped 3</a>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论