Question

这是用于带有“下一个”和“上一个”按钮的图像幻灯片，问题是我希望在显示第一个图像时隐藏“上一个”按钮，并且在下一个按钮时隐藏“下一个”按钮最后一个显示。我使用“活动”类来确定显示哪个图像，默认情况下隐藏所有其他图像：

<button id="prev">previous</button>
<img src="img/1.jpeg" class="one active">
<img src="img/2.jpg" class="two">
<img src="img/3.jpeg" class="three">
<button id="next">next</button>

这是我目前的脚本，if语句是问题所在：

$(document).ready(function() {

if($('.one').hasClass('active')) {
  $('#prev').css('visibility', 'hidden');
}

function nextImg() {
    var active = $('img.active');
    var next = active.next();
    active.removeClass('active');
    next.addClass('active');
}

function prevImg() {
    var active = $('img.active');
    var prev = active.prev();
    active.removeClass('active');
    prev.addClass('active');
}

$('#next').click(nextImg);
$('#prev').click(prevImg);

});

这会在加载时隐藏“上一个”按钮，但即使“活动”类移动到下一个图像，该按钮也会保持隐藏状态。我试过'切换'并添加'else'语句并再次将按钮的可见性设置为'visible'，但一旦它消失，我就无法让它回来。

我希望找到一个针对现有代码的简单修复程序，但我也愿意采用一种更好的方法来处理这个问题。

Answer 1

您遇到问题的原因是您已将按钮的可见性设置为隐藏，但从未恢复。快速修复可以将可见/隐藏逻辑移动到prevImg和nextImg函数。

$(document).ready(function() {

function showPrevButton() {
    if($('.one').hasClass('active')) {
      $('#prev').css('visibility', 'hidden');
    } else {
      $('#prev').css('visibility', 'visible');
    }
}

function nextImg() {
    var active = $('img.active');
    var next = active.next();
    active.removeClass('active');
    next.addClass('active');
    showPrevButton();
}

function prevImg() {
    var active = $('img.active');
    var prev = active.prev();
    active.removeClass('active');
    prev.addClass('active');
    showPrevButton();
}

$('#next').click(nextImg);
$('#prev').click(prevImg);

});

Answer 2

对于幻灯片显示，我建议您使用display代替visibility来制作图片......

不同之处在于保留了“隐形”元素的空间使用display:none;，可以释放此空间。

由于您使用了类，我建议您使用CSS来设置这些属性。

在下面的代码段中，我还会在显示最后一张图片时处理“下一步”按钮的消失。

$(document).ready(function() {

  function showButtons(){
    if ( $("img").first().hasClass("active") ){
      $("#prev").addClass("hidden");
    }
    else if ( $("img").last().hasClass("active") ){
      $("#next").addClass("hidden");
    }
    else{
      $("button").removeClass("hidden");
    }
  }

  function nextImg() {
    var active = $('img.active');
    var next = active.next();
    active.removeClass('active');
    next.addClass('active');
    showButtons();
  }

  function prevImg() {
    var active = $('img.active');
    var prev = active.prev();
    active.removeClass('active');
    prev.addClass('active');
    showButtons();
  }

  showButtons();
  $('#next').click(nextImg);
  $('#prev').click(prevImg);

});

img{
  width:60px;
  display:none;
}
.active{
  display:inline-block;
}
.hidden{
  visibility:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prev">previous</button>
<img src="http://www.freeiconspng.com/uploads/numbers-1-icon-22.png" class="one active">
<img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Numbers%202%20filled.ico" class="two">
<img src="http://www.ifixer.gr/wp-content/uploads/2014/02/Numbers-3-filled-icon-300x300.png" class="three">
<button id="next">next</button>

使按钮消失并在添加/删除类上重新出现

2 个答案: