'次へ'または '前'ボタンを無効にしますか？

Question

私は素晴らしい作品の画像ギャラリーを持っています。最後のスライドに達すると、画像ギャラリーは最初の画像に戻るだけです。

私が知りたいことは、最後/最初の画像に達したときに、次の画像または前の画像をどのように無効にすることができるかです。私のコードです...

スライダースクリプト

function Slider(container, nav) { 

    this.container = container; 
    this.nav = nav.show(); 

    this.imgs = this.container.find('img'); 
    this.imgWidth = this.imgs[0].width; 
    this.imgsLen = this.imgs.length; 

    this.current = 0; 

} 

Slider.prototype.transition = function (coords) { 
    this.container.animate({ 
     'margin-left': coords || -(this.current * this.imgWidth) 
    }); 
}; 

Slider.prototype.setCurrent = function(dir) { 
    var pos = this.current; 
    pos += (~~(dir === 'next') || -1); 
    this.current = (pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen; 
    return pos; 
}; 

HTML

<div class="slider"> 
    <ul> 
     <li> 
      <img src="http://..../spacer.gif" height="400" /> 
     </li> 
     <li> 
      <img src="http://..../spacer.gif" height="400" /> 
     </li> 
    </ul> 
</div> 

<div id="slider-nav"> 
    <button class="previous" data-dir="prev">Previous</button> 
    <button data-dir="next">Next</button> 
</div>​ 

スライダー開始

<script> 
    var container = $('div.slider').css('overflow', 'hidden').children('ul'); 

    var slider = new Slider(container, $('#slider-nav')); 

     slider.nav.find('button').on('click', function() { 
     slider.setCurrent($(this).data('dir')); 
     slider.transition(); 
    }); 
</script> 

これはおそらく、スライダーの構築についてのおおまかなやり方だと私は理解していますが、私は長い間jQueryを使っていません。

私は..

if (this.current = this.imgsLen - 1) { 
    $(':button:contains("previous")').attr('disabled', 'disabled'); 
} 

しかし、無駄の線に沿って何かをやってみました。私はこれも探偵して、まだ働いているものを思い付いていない。あなたは、約再生するには1、heresそれのjsFiddleを必要とする場合には

（これが原因で境界線を持つLiがあり、画像が自動的にスライドdoesntの事実を無視！）

Answer 1

だから、あなたはいくつかのことが続いています。このコードには、2つの問題があります。

if (this.current = this.imgsLen - 1) { 
    $(':button:contains("previous")').attr('disabled', 'disabled'); 
} 

最初に割り当てます。 this.current = this.imgsLen - 1。単一の=に注目してください。コードが実行されるたびにthis.currentを設定しています。

次に、:buttonは、$("button, input[type='button']")の省略形です。それは動作しますが、<botton>しか持っていないことが分かっているので、より速くなるので$('button')を使用することもできます。

最後に、以前に提出されたコードですが、別のオプションがあります。前回と次のクラスを持っているあなたのNAVを変更します。

<div id="slider-nav"> 
    <button class="previous" data-dir="prev">Previous</button> 
    <button class="next" data-dir="next">Next</button> 
</div>​ 

その後、あなたの移行機能にこれを追加します。

http://jsfiddle.net/Qqk3U/15/

希望に役立ちます：

if (this.current == this.imgsLen - 1) { 
    console.log('disable next') 
    $('button.next').addClass('disabled').attr('disabled', true) 
    $('button.previous').removeClass('disabled').attr('disabled', false) 
} 
else if(this.current == 0) { 
    console.log('disable previous') 
    $('button.next').removeClass('disabled').attr('disabled', false) 
    $('button.previous').addClass('disabled').attr('disabled', true) 
} 
else { 
    console.log('enable all') 
    $('button.next').removeClass('disabled').attr('disabled', false) 
    $('button.previous').removeClass('disabled').attr('disabled', false) 
} 

ここで作業バージョンです。

Answer 2

ここでは簡単な修正であります。私はコードにはあまり目を向けていないので、物事についての最良の方法であるかどうかはわかりませんが、それは私のために働いたように見えます。

http://jsfiddle.net/Qqk3U/7/

以下に詳細

変更。

Slider.prototype.setCurrent = function(dir) { 
    //remove the disabled attribute from both buttons 
    this.nav.find('button[data-dir="next"]').removeAttr("disabled"); 
    this.nav.find('button[data-dir="prev"]').removeAttr("disabled"); 
    var pos = this.current; 
    pos += (~~(dir === 'next') || -1); 
    this.current = (pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen; 
    //if new pos is equal to the amount of images add the disabled attribute to next 
    if(pos==this.imgsLen-1) this.nav.find('button[data-dir="next"]').attr("disabled", "disabled"); 
    //if new pos is equal to 0 add disabled attr to prev 
    if(pos==0) this.nav.find('button[data-dir="prev"]').attr("disabled", "disabled"); 
    return pos; 
}; 

その後、

<button disabled="disabled" class="previous" data-dir="prev">Previous</button> 

あなたが最初の画像の上にあるとしたいが後方に行かないので、デフォルトでは、以前のボタンを無効にします。