如何使用JavaScript将href更改为Bootstrap按钮

huangapple
go评论129阅读模式
英文:

How to change a href into bootstrap button with javascript

问题

  1. let downloadLinks = document.querySelectorAll('a[href*="pluginfile.php"]');
  2. // 选择所有包含 "pluginfile.php" 的链接
  4. downloadLinks.forEach(link => {
  5.     let newLink = document.createElement('a');
  6.     newLink.href = link.href;
  7.     newLink.target = '_blank';
  8.     newLink.className = 'btn btn-outline-primary';
  9.     newLink.innerHTML = '<i class="fa fa-download"></i>';
  10.     link.parentNode.replaceChild(newLink, link);
  11. });
  12. // 对每个链接进行替换

这是你提供的代码的翻译部分，用于将自动生成的链接转换成带有Bootstrap按钮和Font Awesome图标的链接。

英文:

I have a automatically generated table with lots of links like:

  1. &lt;a href=&quot;https:/.../pluginfile.php/...&quot;&gt;Some random Text&lt;/a&gt;

I want all those links to be a bootstrap button with font awesome like this:

  1. &lt;a href = &quot;https:/.../pluginfile.php/...&quot; 
  2.       target = &quot;_blank&quot; 
  3.       class  = &quot;btn btn-outline-primary&quot; &gt;
  4.   &lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;
  5. &lt;/a&gt;

this is what I came up with from google:

  1. let downloadlink = document.querySelectorAll(&#39;a[href*=&quot;pluginfile.php&quot;]&#39;);
  2.    // All Links with ...pluginfile.php...
  3.     
  4. let downloadbutton = document.createElement(&#39;a&#39;);
  6. // This might also help (from google):
  8. downloadbutton.innerHTML = &#39;&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;&#39;;

I have no clue how to piece those snippets together and fill in whats missing. I'd appreciate any help.

答案1

得分: 2

只需使用循环来遍历所有链接并在需要时插入/删除/修改。

  1. // 获取包含"pluginfile.php"的href属性的<a>标签
  2. const targetLinks = document.querySelectorAll(`a[href*="pluginfile.php"]`);
  4. // 循环遍历targetLinks以分别处理每个<a>标签
  5. for (let i = 0; i < targetLinks.length; i++) {
  7.   // 获取当前<a>标签的内容
  8.   const originalContent = targetLinks[i].textContent;
  10.   // 设置Bootstrap类
  11.   targetLinks[i].setAttribute("class", "btn btn-outline-primary");
  13.   // 设置目标操作
  14.   targetLinks[i].setAttribute("target", "_blank");
  16.   // 添加fontAwesome图标和原始内容
  17.   // 如果不需要保留内容，可以从下面的代码中删除${originalContent}
  18.   targetLinks[i].innerHTML = `<i class="fa fa-download"></i>${originalContent}`;
  19. }
  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet"/>
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  3. <a href="https://first/pluginfile.php/...">Random Text A</a>
  4. <a href="https://second/pluginfile.php/...">Random Text B</a>
  5. <a href="https://third/pluginfile.php/...">Random Text C</a>
  6. <a href="https://forth/pluginfile.php/...">Random Text D</a>
  7. <a href="https://fifth/pluginfile.php/...">Random Text E</a>
  8. <a href="https://sixth/pluginfile.php/...">Random Text F</a>
  9. <a href="https://seventh/pluginfile.php/...">Random Text G</a>
  10. <a href="https://eighth/pluginfile.php/...">Random Text H</a>
  11. <a href="https://ninth/pluginfile.php/...">Random Text I</a>
  12. <a href="https://tenth/pluginfile.php/...">Random Text J</a>
  13. <a href="https://google.com">This should not be bootstrapped 1</a>
  14. <a href="https://example.org">This should not be bootstrapped 2</a>
  15. <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 -->

  1. //Getting &lt;a&gt; tags with href that contains &quot;pluginfile.php&quot;
  2. const targetLinks = document.querySelectorAll(`a[href*=&quot;pluginfile.php&quot;]`);
  4. //Loop through targetLinks to target each &lt;a&gt; tag respectively
  5. for(let i=0; i&lt;targetLinks.length ;i++){
  7.   //Get the current &lt;a&gt; tag&#39;s content
  8.   const originalContent = targetLinks[i].textContent;
  9.   
  10.   //Setting bootstrap classes
  11.   targetLinks[i].setAttribute(&quot;class&quot;, &quot;btn btn-outline-primary&quot;);
  12.   
  13.   //Setting target action
  14.   targetLinks[i].setAttribute(&quot;target&quot;, &quot;_blank&quot;);
  15.   
  16.   //Adding fontAwesome Icon and the original content
  17.   //You may remove ${originalContent} from below code if you dont need to remain the content
  18.   targetLinks[i].innerHTML = `&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;${originalContent}`
  19. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  3. &lt;a href=&quot;https://first/pluginfile.php/...&quot;&gt;Random Text A&lt;/a&gt;
  4. &lt;a href=&quot;https://second/pluginfile.php/...&quot;&gt;Random Text B&lt;/a&gt;
  5. &lt;a href=&quot;https://third/pluginfile.php/...&quot;&gt;Random Text C&lt;/a&gt;
  6. &lt;a href=&quot;https://forth/pluginfile.php/...&quot;&gt;Random Text D&lt;/a&gt;
  7. &lt;a href=&quot;https://fifth/pluginfile.php/...&quot;&gt;Random Text E&lt;/a&gt;
  8. &lt;a href=&quot;https://sixth/pluginfile.php/...&quot;&gt;Random Text F&lt;/a&gt;
  9. &lt;a href=&quot;https://seventh/pluginfile.php/...&quot;&gt;Random Text G&lt;/a&gt;
  10. &lt;a href=&quot;https://eighth/pluginfile.php/...&quot;&gt;Random Text H&lt;/a&gt;
  11. &lt;a href=&quot;https://ninth/pluginfile.php/...&quot;&gt;Random Text I&lt;/a&gt;
  12. &lt;a href=&quot;https://tenth/pluginfile.php/...&quot;&gt;Random Text J&lt;/a&gt;
  13. &lt;a href=&quot;https://google.com&quot;&gt;This should not be bootstrapped 1&lt;/a&gt;
  14. &lt;a href=&quot;https://example.org&quot;&gt;This should not be bootstrapped 2&lt;/a&gt;
  15. &lt;a href=&quot;https://example.net&quot;&gt;This should not be bootstrapped 3&lt;/a&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月24日 10:10:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/75552036.html
  • button
  • font-awesome
  • html
  • javascript
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定