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按钮可隐藏所有“猫”项目，然后使用“数据索引”属性将其定位，以显示所需的项目。

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

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

2 个答案: