我创建了一个滑出社交媒体图标的 animation。 但是，我需要将其应用于多个 div

Question

我正在建立一个网站并且我有多个图像（总共七个） 。

对于每个图像，我需要一个按钮在图像悬停时出现。

该按钮是加号(+)的 small.png 图像。

单击按钮时：

• 按钮图像变为水平线

• 社交媒体图标向右滑动。

我让它在一张图片上完美运行。 问题是，当我将相同的 JavaScript 代码应用于其他图像时，它不起作用。 我尝试将所有 ID 更改为 Classes，但仍然没有用。 我怎样才能让它工作？

下面是我的代码，可以在以下位置看到： http://box5385.temp.domains/~atelifw5/test-2/

 // Controls social media reveal animation function myFunction() { console.log("Button clicked"); var img = document.getElementById("cross.img"); var x = document.getElementById("hidden-social"); x.addEventListener("animationend", function(e) { e.preventDefault(); if (x.style.animationName == "slide-left") { x.style.display = "none"; } }); if (x.style.display === "none") { x.style.display = "block"; x.style.animation = "1s slide-right"; img.src = "http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/horiz.thin_.png"; } else { x.style.animation = "1s slide-left"; img.src = "http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_.png"; } } // Controls the cross-button so fading image // stays faded when cross-button is hovered document.getElementById("cross-button").onmouseover = function() { mouseOver() }; document.getElementById("cross-button").onmouseout = function() { mouseOut() }; function mouseOver() { document.getElementById("fading-image").style.opacity = "0.5"; } function mouseOut() { document.getElementById("fading-image").style.opacity = "1"; } // Controls the fading image, so it remains // faded after hover-off of cross-button document.getElementById("fading-image").onmouseover = function() { mouseOver() }; document.getElementById("fading-image").onmouseout = function() { mouseOut() }; function mouseOver() { document.getElementById("fading-image").style.opacity = "0.5"; } function mouseOut() { document.getElementById("fading-image").style.opacity = "1"; } // Controls the cross-button, so it is visible when the // hidden-social container is hovered document.getElementById("hidden-social-container").onmouseover = function() { mouseOver() }; document.getElementById("hidden-social-container").onmouseout = function() { mouseOut() }; function mouseOver() { document.getElementById("fading-image").style.opacity = "0.5"; document.getElementById("cross-button").style.opacity = "1.0"; } function mouseOut() { document.getElementById("fading-image").style.opacity = "1"; document.getElementById("cross-button").style.opacity = "0"; }

 /*Fade image*/ #container { overflow: auto; } #cross-button { cursor: pointer; position: relative; top: -55px; left: -54%; opacity: 0; transition: opacity 1s; z-index: 9999; width: 32px; float: right; } #fading-image>img { opacity: 1; transition: opacity 1s; width: auto; } #fading-image:hover { opacity: 0.5; transition: opacity 1s; } #fading-image:hover~#cross-button, #cross-button:hover { opacity: 1; }.social-icon-2 { width: 25px; }.social-icon-p2 { width: 15px; } #hidden-social-container { width: 200px; height: 32px; position: relative; top: -52px; left: -48%; overflow: hidden; float: right; } #hidden-social-container:hover~#cross-button, #cross- button:hover { opacity: 1; } #hidden-social { width: auto; } @keyframes slide-right { from { margin-left: -100%; } to { margin-left: 0%; } } @keyframes slide-left { from { margin-left: 0%; } to { margin-left: -100%; } }

 <:--- HTML ---> <div id="cross-container"> <div id="fading-image"> <img src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/RO_PIX_EV_03_1320px.png"> </div> <div id="cross-button" onclick="myFunction()"> <img id="cross:img" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/cross.thin_:png"> </div> <div id="hidden-social-container"> <div id="hidden-social" style="display;none:"> <a href="https.//instagram:com" target="blank"> <img class="social-icon-2" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Instagram_Black:svg"> </a> <a href="https.//www.facebook.com/sharer/sharer?php:u=http.//box5385.temp:domains/~atelifw5/east-village" target="blank"> <img class="social-icon-2" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black:svg"> </a> <a href="https.//twitter?com/share:url=http.//box5385.temp:domains/~atelifw5/east-village/" target="_blank"> <img class="social-icon-2" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Facebook_Black:svg"> </a> <a href="https.//www.linkedin?com/shareArticle:url=http.//box5385.temp:domains/~atelifw5/east-village" target="blank"> <img class="social-icon-2" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/LinkedIn_Black:svg"> </a> <a href="https.//pinterest:com/pin/create/button/" target="blank"> <img class="social-icon-p2" src="http.//box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg"> </a> </div> </div> </div>

Answer 1

假设您为每张图片重复隐藏社交容器，为每张图片指定唯一 ID (id="cross.img-1") 以及 div (id="hidden-social-container-1" ). 将他们的 ID 发送到 function。

html：

<div id="cross-button" onclick="myFunction("cross.img-1", "hidden-social-container-1" )"> 

javascript：

function myFunction(imgId, divId) {
var img = document.getElementById(imgId);
var x = document.getElementById(divId);
...
}