单击按钮时如何更改 css 属性?
How to change css property when you click on button?
我希望当我点击它们中的每一个时弹出带有 class 颜色的 span 元素,但只针对那个按钮。
[![在此处输入图片描述][1]][1]
只有当我单击其中一个以将所有具有 class 颜色的元素的可见性更改为可见时,我才实现。
我的代码:https://jsbin.com/govowakasa/edit?js
document.getElementById("btn-apple").addEventListener("click", function(e) {
showColor()
});
function showColor() {
const colors = document.getElementsByClassName("color");
for (let i=0; i<colors.length; i++) {
colors[i].style.visibility = 'visible';
}};
您不能对超过 1 个元素使用相同的 ID
。
我用新的 class 名称 fruit-btn
.
替换了按钮的 ID
然后我在 JS 中制作了一个包含按钮和颜色跨度的数组。
然后我遍历每个按钮添加一个 EventListener
.
如果我添加了另一个循环来隐藏每个颜色跨度,然后使 i
跨度可见。不需要功能。
const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");
for (let i = 0; i < fruit_btn.length; i++) {
fruit_btn[i].addEventListener("click", function(e) {
for (let i = 0; i < fruit_btn.length; i++) {
color_spans[i].style.visibility = "hidden";
}
color_spans[i].style.visibility = "visible";
});
}
body {
font-size: 2rem;
}
li {
margin: 20px;
list-style: none;
}
button i {
cursor: pointer;
font-size: 3rem;
}
.color {
margin: 10px;
border: 1px solid black;
background-color: blanchedalmond;
display: inline-block;
padding: 10px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<link rel="stylesheet" href="list.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<p>
FRUITS
</p>
<ul>
<li class="items">
<button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
<span class="color">red and yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-carrot"></i></button>
<span class="color">orange</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-lemon"></i></button>
<span class="color">yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
<span class="color">red and green</span>
</li>
</ul>
<script src="/week-4/index.js"></script>
</body>
</html>
我建议 add/remove 使用 Class 而不是 adding/removing 直接 CSS 样式。
您可以简单地添加这一行
fruits[i].style.backgroundColor = 'red'
我希望当我点击它们中的每一个时弹出带有 class 颜色的 span 元素,但只针对那个按钮。
[![在此处输入图片描述][1]][1]
只有当我单击其中一个以将所有具有 class 颜色的元素的可见性更改为可见时,我才实现。
我的代码:https://jsbin.com/govowakasa/edit?js
document.getElementById("btn-apple").addEventListener("click", function(e) {
showColor()
});
function showColor() {
const colors = document.getElementsByClassName("color");
for (let i=0; i<colors.length; i++) {
colors[i].style.visibility = 'visible';
}};
您不能对超过 1 个元素使用相同的 ID
。
我用新的 class 名称 fruit-btn
.
替换了按钮的 ID
然后我在 JS 中制作了一个包含按钮和颜色跨度的数组。
然后我遍历每个按钮添加一个 EventListener
.
如果我添加了另一个循环来隐藏每个颜色跨度,然后使 i
跨度可见。不需要功能。
const fruit_btn = document.getElementsByClassName("fruit-btn");
const color_spans = document.getElementsByClassName("color");
for (let i = 0; i < fruit_btn.length; i++) {
fruit_btn[i].addEventListener("click", function(e) {
for (let i = 0; i < fruit_btn.length; i++) {
color_spans[i].style.visibility = "hidden";
}
color_spans[i].style.visibility = "visible";
});
}
body {
font-size: 2rem;
}
li {
margin: 20px;
list-style: none;
}
button i {
cursor: pointer;
font-size: 3rem;
}
.color {
margin: 10px;
border: 1px solid black;
background-color: blanchedalmond;
display: inline-block;
padding: 10px;
visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<link rel="stylesheet" href="list.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha512-0S+nbAYis87iX26mmj/+fWt1MmaKCv80H+Mbo+Ne7ES4I6rxswpfnC6PxmLiw33Ywj2ghbtTw0FkLbMWqh4F7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
</head>
<body>
<p>
FRUITS
</p>
<ul>
<li class="items">
<button class="fruit-btn"><i class="fas fa-apple-alt"></i></button>
<span class="color">red and yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-carrot"></i></button>
<span class="color">orange</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-lemon"></i></button>
<span class="color">yellow</span>
</li>
<li class="items">
<button class="fruit-btn"><i class="fas fa-pepper-hot"></i></button>
<span class="color">red and green</span>
</li>
</ul>
<script src="/week-4/index.js"></script>
</body>
</html>
我建议 add/remove 使用 Class 而不是 adding/removing 直接 CSS 样式。
您可以简单地添加这一行
fruits[i].style.backgroundColor = 'red'