How can I improve this simple image gallery code?

Question

I'm trying to make a basic image gallery with simple html , css and js

This is the code so far.

 $('.navigation-1').click(function() { $('.cat-1').css("opacity", "1"); $('.cat-2').css("opacity", "0"); $('.cat-3').css("opacity", "0"); $('.cat-4').css("opacity", "0"); }); $('.navigation-2').click(function() { $('.cat-1').css("opacity", "0"); $('.cat-2').css("opacity", "1"); $('.cat-3').css("opacity", "0"); $('.cat-4').css("opacity", "0"); }); $('.navigation-3').click(function() { $('.cat-3').css("opacity", "1"); $('.cat-1').css("opacity", "0"); $('.cat-2').css("opacity", "0"); $('.cat-4').css("opacity", "0"); }); $('.navigation-4').click(function() { $('.cat-4').css("opacity", "1"); $('.cat-1').css("opacity", "0"); $('.cat-2').css("opacity", "0"); $('.cat-3').css("opacity", "0"); });

 .navigation { margin-bottom: 15px; } .cat { opacity: 0; position: absolute; transition: opacity 0.5s ease-in-out; } /* Show a picture at load */ .cat-1 { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="navigation"> <button class="nav navigation-1">Cat 1</button> <button class="nav navigation-2">Cat 2</button> <button class="nav navigation-3">Cat 3</button> <button class="nav navigation-4">Cat 4</button> </div> <img class="cat cat-1" src="http://placekitten.com/300/200" alt=""> <img class="cat cat-2" src="http://placekitten.com/300/201" alt=""> <img class="cat cat-3" src="http://placekitten.com/301/200" alt=""> <img class="cat cat-4" src="http://placekitten.com/301/201" alt="">

How do I dynamically generate the buttons and hide the other images, when one image is shown.

I used opacity to show and hide images, but feel free to use whatever suits you best.

I'm sure the this keyword is useful here, but how?

Answer 1

How about the following... where I've added a "data-index" attribute to the "navigation" buttons.

The on button click you hide all "cat" items, and then show the required one by targeting it using the "data-index" attribute.

 $('.nav').click(function() { $('.cat').css("opacity", "0"); var id = $(this).data("index"); $('.cat-' + id).css("opacity", "1"); });

 .navigation { margin-bottom: 15px; } .cat { opacity: 0; position: absolute; transition: opacity 0.5s ease-in-out; } /* Show a picture at load */ .cat-1 { opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="navigation"> <button class="nav" data-index="1">Cat 1</button> <button class="nav" data-index="2">Cat 2</button> <button class="nav" data-index="3">Cat 3</button> <button class="nav" data-index="4">Cat 4</button> </div> <img class="cat cat-1" src="http://placekitten.com/300/200" alt=""> <img class="cat cat-2" src="http://placekitten.com/300/201" alt=""> <img class="cat cat-3" src="http://placekitten.com/301/200" alt=""> <img class="cat cat-4" src="http://placekitten.com/301/201" alt="">

Answer 2

 // get all cats const cats = document.querySelectorAll('.cat') // gets nav container const nav = document.querySelector('.navigation') // for each cat for (let i = 0; i < cats.length; i++) { // select current cat const chosenCat = cats[i]; // create button for it const button = document.createElement("button"); // add some text to button button.innerHTML = `Cat ${i + 1}`; // create onclick function that hides all cats and reveals current button.onclick = () => { // use Array.prototype.slice.call because you cant iterate the NodeList Array.prototype.slice.call(cats).forEach(cat => cat.style.opacity = 0); chosenCat.style.opacity = 1; }; // add button to nav container nav.appendChild(button); } // reveal initial cat cats[0].style.opacity = 1;

 .cat { opacity: 0; position: absolute; transition: opacity 0.5s ease-in-out; top: 0; } .navigation { margin-top: 200px; }

 <img class="cat cat-1" src="http://placekitten.com/300/200" alt=""> <img class="cat cat-2" src="http://placekitten.com/300/201" alt=""> <img class="cat cat-3" src="http://placekitten.com/301/200" alt=""> <img class="cat cat-4" src="http://placekitten.com/301/201" alt=""> <div class="navigation"> </div>