如何在函数上创建数组显示？

Question

I have given four images the same class name and placed them inside a div. Currently the image before is set to display with the four set to not show in CSS. I am attempting to have the images display onmouseover through Javascript. I can do it through CSS but would like to see it through Javascript. Below is the code:

HTML

 var first = document.getElementById('first'); var Larrow = document.getElementById('arrow1'); var Rarrow = document.getElementById('arrow2'); var slidpics = document.getElementByClassName('crash'); var stop = document.getElementsByClassName('picbac'); var display = 0; first.onmouseover = function() { if (x = 0, x < slidpics.length, x++) { slidpics[display].style.display = 'inline-flex'; display++; } } stop.onmouseout = function() { var y; if (y = 0, y < slidpics.length, y++) { slidpics[display].style.display = 'none'; display++; } } 

 <div class = "picbac"></div> <img id="first" src="../Pics /January_2019/crash1.jpg" alt="A picture you can't see"> <p id="arrow1"></p> <img id="show1" class="crash" src="../Pics/January_2019/crash2.jpg" alt="Another picture you can't see"> <img id="show2" class="crash" src="../Pics/January_2019/crash3.jpg" alt="You must be blind"> <img id="show3" class="crash" src="../Pics/January_2019/crash4.jpg" alt="Or we're not linking up"> <p id="arrow2"></p> <img id="show4" class="crash" src="../Pics/January_2019/crash5.jpg" alt="Still checkin?"> 

Answer 1

A good way is keep off the style from the script and to just assign a class to the .picbac container so as to show the .crash children with display: inline-flex

var first = document.getElementById('first');
var picbac = document.querySelector('.picbac');

first.addEventListener('mouseenter', function() {
  picbac.classList.add('show');
});
picbac.addEventListener('mouseleave', function() {
  picbac.classList.remove('show');
});

on mouseenter/mouseleave a .show class is toggled on the .picbac element, so the CSS could be

.picbac .crash {
  display: none;
}

.picbac.show .crash {
  display: inline-flex;
}

This approach is possible as long as your .crash images are children of the .picbac element and this simplifies a lot the code and it decouples the logic (behaviour and appearance).

Codepen demo

Answer 2

Many ways to do this but this is one if you dont mind jquery.

 // show the first image in the set as default $("#wrapper > .content:first-of-type").children("img").show(); // show images on mouse enter $(".content p").on("mouseenter", function(){ $(this).closest(".content").children("img").show(); }); // hide the images on mouse out $(".content p").on("mouseout", function(){ $(this).closest(".content").children("img").hide(); }); 

 .content img{ display: none; } .content p:hover{ cursor: pointer; color: crimson; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="wrapper"> <div class="content"> <p>--></p> <img id="first" src="../Pics /January_2019/crash1.jpg" alt="A picture you can't see"> </div> <div class="content"> <p class="arrow">--></p> <img id="show1" class="crash" src="../Pics/January_2019/crash2.jpg" alt="Another picture you can't see"> <img id="show2" class="crash" src="../Pics/January_2019/crash3.jpg" alt="You must be blind"> <img id="show3" class="crash" src="../Pics/January_2019/crash4.jpg" alt="Or we're not linking up"> </div> <div class="content"> <p class="arrow">--></p> <img id="show4" class="crash" src="../Pics/January_2019/crash5.jpg" alt="Still checkin?"> </div> </div> 

Answer 3

You don't really need an array to achieve what you're describing.

Using JQuery with minimal code, I use the arrows to trigger fadeIn() of the images.

 var imgsDiv = $("#picbac").children(); imgsDiv.on("mouseenter", function() { $(this.children[1]).fadeIn(500); //you can use show() }); imgsDiv.on("mouseout", function() { $(this.children[1]).fadeOut(500); }); 

 .crash { display: none; } [id^=container]{ border: 1px solid lightgrey; margin: 20px; width : 80vw; } p{ font-weight: 900; } img{ width: 50%; height: 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="picbac"> <div id="container1"> <p id="arrow1">Show 1</p> <img id="show1" class="crash" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Another picture you can't see"> </div> <div id="container2"> <p id="arrow2">Show 2</p> <img id="show2" class="crash" src="https://www.gettyimages.co.uk/gi-resources/images/500px/983794168.jpg" alt="You must be blind"> </div> <div id="container3"> <p id="arrow3">Show 3</p> <img id="show3" class="crash" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Or we're not linking up"> </div> <div id="container4"> <p id="arrow4">Show 4</p> <img id="show4" class="crash" src="https://www.gettyimages.co.uk/gi-resources/images/500px/983794168.jpg" alt="Still checkin?"> </div> </div> 

Hope it helps.