如何改進這個簡單的圖片庫代碼？

Question

我正在嘗試使用簡單的html 、 css和js制作一個基本的圖片庫

這是到目前為止的代碼。

 $('.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="">

當顯示一個圖像時，如何動態生成按鈕並隱藏其他圖像。

我使用opacity來顯示和隱藏圖像，但您可以隨意使用最適合您的任何東西。

我確定this關鍵字在這里很有用，但是如何呢？

Answer 1

下面怎么樣......我在“導航”按鈕中添加了“數據索引”屬性。

單擊 on 按鈕可以隱藏所有“cat”項目，然后通過使用“data-index”屬性將其定位來顯示所需的項目。

 $('.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>