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

Question

I'm building a website and I have multiple images (seven in total) .

For each image , I need a button to appear when the image is hovered.

The button is a small.png image of a plus-sign (+) .

When the button is clicked :

• the button image changes to a horizontal line

• Social media icons slide in to the right.

I have it working perfectly on one image. The problem is, when I apply the same JavaScript code to the other images, it doesn't work. I tried changing all of my ID's to Classes, but still no good. How can I get this to work?

Below is my code and can be seen at: 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

Assuming that you have repeating of the hidden-social-container for each image, give each image an unique id (id="cross.img-1") and also fo the div (id="hidden-social-container-1"). Send the ids for them to the 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);
...
}