Javascript为类中的所有元素设置href [关闭]

Posted 2023-03-05

【中文标题】Javascript为类中的所有元素设置href [关闭]

【英文标题】：Javascript set href for all elements in class [closed]

【发布时间】：2018-07-03 13:18:21

【问题描述】：

我有一个（至少 4 个） 标签列表，其中包含“remove-typefilter”类 他们没有'href'。但是当用户点击一个按钮时，我想给他们一个。

这是我为实现此目的而编写的 JS 函数：

function BuildButtons(urlparams) 
    elements = document.getElementsByClassName('remove-typefilter')
    for (let element in elements) 
        element.href = 'www.newlink.com' + urlparams
        element.style = 'color: red;'
    

然而，当我运行这个函数时，它并没有改变属性。 A 标签没有链接，样式也不会改变。

有谁知道我做错了什么？

【问题讨论】：

How to change href of <a> tag on button click through javascript的可能重复

【参考方案1】：

for 循环返回索引而不是实际元素。

for (let element in elements) 

应该是

for (let i in elements) 
    let element = elements[i];

或

elements.forEach(function(element) 

【参考方案2】：

两个问题：

函数定义中的语法错误：url-params 无效。使用urlParams。 for ... in 循环迭代被迭代对象的键，而不是值。请改用for ... of

还有：

不要将elements 定义为全局变量。使用const。 最好在您的 URL 中添加协议，例如 http:// 虽然将字符串分配给style 有效，但直接分配给相关样式属性更有效

更正的代码：

function BuildButtons(urlParams) 
    const elements = document.getElementsByClassName('remove-typefilter');
    for (const element of elements) 
        element.href = 'http://www.newlink.com' + urlParams;
        element.style.color = 'red';
    

【参考方案3】：

为什么不使用querySelectorAll() 和forEach()

function BuildButtons(urlparams) 
    var elements = document.querySelectorAll('.remove-typefilter'); 
    elements.forEach(function(element)
        element.href = 'www.newlink.com' + urlparams
        element.style = 'color: red;'
    );
;

BuildButtons('#xxx');  // invoke call the function how ever you like.

<a class="remove-typefilter">one</a>
<a class="remove-typefilter">two</a>
<a class="remove-typefilter">three</a>

【讨论】：

这解决了，谢谢！

在我看来，在此之前还有其他答案，这也解释了出了什么问题。

@Jasper ***.com/a/48423517/295783 是更完整的答案。

@Jasper 我同意 mplungjan 和 trincot。 trincots 的答案应该是被接受的，而不是我的。他的回答解释了你做错了什么+为什么以及如何解决。我的回答只是关于如何解决现有任务的另一种方法。

感谢您的回复，我已将 trincots 的答案设为已接受。

【参考方案4】：

您可以使用设置 href 属性

Element.setAttribute(*name*,*value*);