如何使用 javascript 和按钮更改图像的不透明度？
Posted
技术标签:
【中文标题】如何使用 javascript 和按钮更改图像的不透明度？【英文标题】：How to change opacity of images with javascript and buttons? 【发布时间】：2017-09-13 16:47:20 【问题描述】：在不更改任何 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>
【问题讨论】：
是否有理由不更改html？ 是的，不改变它显然是可能的 有些事情必须改变。您需要通过将样式注入引用该元素的 html 或更改 element.style.opacity 属性来更改元素的不透明度。 【参考方案1】：做了一些修改：
<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';
);
【讨论】：
OP 注释。您需要通过将其放在您的脑海中来添加 jQuery：以上是关于如何使用 javascript 和按钮更改图像的不透明度？的主要内容，如果未能解决你的问题，请参考以下文章