因此,如果单击按钮,我有一个函数可以将类名更改为另一个类名,然后我有其他函数可以获取更改后的类名并接收更改了类的元素,但我得到的是未定义而不是元素寻找,但我不知道为什么。此外,我想问你们是否有可能在本地存储中添加 key 高于我得到的最高 key 的项目,想象一下我有一个项目有(1,“John”),而我的下一个项目有 key 2 ? 网页:
<button id="xs" onclick="SizeButtonStyle(this)"
class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)"
class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)"
class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)"
class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)"
class="unclicked_size_button"><b>XL</b></button>
Javascript:
function SizeButtonStyle(el) {
var size = el;
if (el.id == "xs") {
document.getElementById("xs").className = "clicked_size_button";
document.getElementById("s").className = "unclicked_size_button";
document.getElementById("m").className = "unclicked_size_button";
document.getElementById("l").className = "unclicked_size_button";
document.getElementById("xl").className = "unclicked_size_button";
}
if (el.id == "s") {
document.getElementById("xs").className = "unclicked_size_button";
document.getElementById("s").className = "clicked_size_button";
document.getElementById("m").className = "unclicked_size_button";
document.getElementById("l").className = "unclicked_size_button";
document.getElementById("xl").className = "unclicked_size_button";
}
if (el.id == "m") {
document.getElementById("xs").className = "unclicked_size_button";
document.getElementById("s").className = "unclicked_size_button";
document.getElementById("m").className = "clicked_size_button";
document.getElementById("l").className = "unclicked_size_button";
document.getElementById("xl").className = "unclicked_size_button";
}
if (el.id == "l") {
document.getElementById("xs").className = "unclicked_size_button";
document.getElementById("s").className = "unclicked_size_button";
document.getElementById("m").className = "unclicked_size_button";
document.getElementById("l").className = "clicked_size_button";
document.getElementById("xl").className = "unclicked_size_button";
}
if (el.id == "xl") {
document.getElementById("xs").className = "unclicked_size_button";
document.getElementById("s").className = "unclicked_size_button";
document.getElementById("m").className = "unclicked_size_button";
document.getElementById("l").className = "unclicked_size_button";
document.getElementById("xl").className = "clicked_size_button";
}
}
function addToCartClicked(event) {
var product = document.getElementsByClassName("product_name")[0].innerText;
var price = document.getElementsByClassName("price")[0].innerText;
var info = [product, "XS", price];
console.log(info);
localStorage.setItem("names", JSON.stringify(info));
}
最佳答案
按钮类更改代码没有任何问题,下面未经修改的 JavaScript 工作没有错误。
请提供有关您遇到的实际错误的更具体的详细信息。
function SizeButtonStyle(el) {
var size = el
if (el.id == 'xs') {
document.getElementById('xs').className = "clicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if (el.id == 's') {
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "clicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if (el.id == 'm') {
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "clicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if (el.id == 'l') {
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "clicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if (el.id == 'xl') {
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "clicked_size_button";
}
}
.unclicked_size_button {
padding: 0.5rem;
}
.clicked_size_button {
padding: 0.5rem 2rem;
}
<button id="xs" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XL</b></button>
关于javascript - 更改类名称的函数存在问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61485954/