追加/削除クラスでボタンを消して再び表示する

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); 

});