使用 jquery 单击按钮时切换到下一张图片

Question

**我想在使用jquery单击按钮时切换到下一张图片，一次显示一张图片，我应该使用hide/show，显示：none还是.remove/.append？ **

$("#next").toggle(function(){
  function(){
    $('#planet1').remove();
    $('#planet2').append();
  });
  function(){
    $(this).remove('#planet2').append('#planet3');
  });
  function(){
    $(this).removeClass('planet3').addClass('planet4');
  });
  function(){
    $(this).removeClass('planet4').addClass('planet5');
  });
});

          <div class="planets">
              <img id="planet1" src="img\planets\planet1.png" />
              <img id="planet2" src="img\planets\planet2.png" />
              <img id="planet3" src="img\planets\planet3.png" />
              <img id="planet4" src="img\planets\planet4.png" />
              <img id="planet5" src="img\planets\planet5.png" />
          </div>
              <button id="next"> Make a greener planet</button>

Answer 1

这是一种通过一些基本的 jQuery 和 CSS 来完成您正在寻找的东西的方法。首先，您会将所有图像设置为默认隐藏，仅显示第一张。

img:first-of-type {
  display: inherit;
}

img {
  display: none;
}

那你就可以有一个循环通过的函数了

$('#next').click(function() {
  currentPicture++;
  if (currentPicture > $('img').length) {
    currentPicture = 1;
  }
  $('img').css('display', 'none');
  $(`#planet${currentPicture}`).css('display', 'inherit');
});

https://jsfiddle.net/hmnhdknL/1/

使用 jquery 单击按钮时切换到下一张图片

Change to the next image when clickon button using jquery

jquery

onclick

buttonclick