在不更改任何 HTML 的情况下，我需要 3 个按钮，每个图形一个，当我单击第一个按钮时，我需要将第二个和第三个图形的不透明度设置为 0%，将第一个图像设置为 100%，并且其他两个按钮依此类推。
body {
font-family: Avenir, sans-serif;
}
h1 {
text-align: center;
font-weight: 100;
}
#works {
display: flex;
}
#works figure {
transition: 1s opacity;
}
#works figure img {
width: 100%;
margin-bottom: 1rem;
}
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Sculptors and Architects of the Italian Renaissance</title>
</head>
<body>
<h1>Sculptors and Architects of the Italian Renaissance</h1>
<div id="works">
<figure data-artist="michelangelo">
<img src="david.jpg" alt>
<figcaption>Head of <i>David</i>, Michelangelo (c. 1501)</figcaption>
</figure>
<figure data-artist="donatello">
<img src="david-plaster.jpg" alt>
<figcaption>Detail from painted plaster replica of Donatello's bronze <i>David</i> (c. 1430)</figcaption>
</figure>
<figure data-artist="brunelleschi">
<img src="florence-cathedral.jpg" alt>
<figcaption>Dome of Florence Cathedral by Filippo Brunelleschi (1436)</figcaption>
</figure>
</div>
<div id="controls">
<button id="button">Michelangelo</button>
<button id="button2">Donatello</button>
<button id="button3">Brunelleschi</button>
</div>
<script>
</script>
</body>
</html>
最佳答案
做了一些修改:
<button id="michelangelo">Michelangelo</button>
<button id="donatello">Donatello</button>
<button id="brunelleschi">Brunelleschi</button>
使用 jQuery:
$('button').click(function(e){
e.preventDefault();
$('figure').style.opacity = '0';
$(`figure[data-artist="${$(this).attr('id')}"`).style.opacity = '1';
});
关于javascript - 如何使用 javascript 和按钮更改图像的不透明度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43462124/