製作按鈕消失並重新出現在添加/刪除類別

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'語句，並將按鈕的可見性再次設置爲'可見'，但一旦消失，我無法讓它回來。

我希望找到一個簡單的解決方案，我現有的代碼，但我也打開一個不同的方法，這將更好地工作。

Answer 1

對於幻燈片，我建議你使用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>

Answer 2

您遇到問題的原因是因爲您已將按鈕的可見性設置爲隱藏，但從未將其恢復。快速修復可能是將可見/隱藏邏輯移動到您的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); 

});