gpt4 book ai didi

javascript - 如何使用 javascript 和按钮更改图像的不透明度?

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:04 24 4
gpt4 key购买 nike

在不更改任何 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/

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