如何改进这个简单的图片库代码？

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>