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

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>