gpt4 book ai didi

javascript - 如何在 id 函数上应用类函数?

转载 作者:行者123 更新时间:2023-11-28 00:41:47 24 4
gpt4 key购买 nike

所以我的任务是为每个段落(其中五个)制作功能(显示/隐藏),我确实喜欢这样做

function btn() {
var x = document.getElementById('para');
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

对于每个段落,我都使用 Id 而不是类。因为任务说每个段落一个按钮。

现在我遇到了一个问题,如何同时为所有这些应用此(颜色)函数。

function color() {
bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
elements = document.getElementByClassName('color');

for (var i = 0; i < elements.length; i++) {
document.getElementByClassName('color')[i].style.backgroundColor = bgColorCode;
}
}

//Html
<button onclick = "color()">Color</button>
<button onclick = "btn()">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "btn2()">Show/Hide</button>
<p id = "para2"> Example 2 </p>
...

不知道如何将这个函数“颜色”应用到我的所有段落,因为它们在 id 下?

有什么解决办法吗?

最佳答案

如果将 color 类添加到 para 元素并将函数 getElementByClassName() 更改为 getElementsByClassName()(你忘记了一个 s)。然后你的代码工作。在 for 循环中,您可以使用元素数组 elements[i] 而不是再次调用 getElementsByClassName() 函数。

function color() {
bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
elements = document.getElementsByClassName('color');

for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = bgColorCode;
}
}

//just slightly modified so it works with multiple paragraphs by making the id a function parameter.
function btn(id) {
var x = document.getElementById(id);
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="color()">Color</button>
<button onclick="btn('para')">Show/Hide</button>
<p class="color" id="para">Example 1</p>

<button onclick="btn('para2')">Show/Hide</button>
<p class="color" id="para2">Example 2</p>

关于javascript - 如何在 id 函数上应用类函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53042765/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com