Отключение кнопки «Далее» или «Предыдущая»?

Question

У меня есть галерея изображений, которая отлично работает. Когда достигнут последний слайд, галерея изображений просто перетасовывается назад к первому изображению.

Теперь, что я хочу знать, как я могу отключить следующее или предыдущее изображение при достижении последнего/первого изображения? Мой код ...

Slider Скрипт

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>​ 

Slider Initiation

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

Но безрезультатно. Я тоже это сделал, и до сих пор не придумал ничего, что сработало.

В случае, если вам нужно баловаться с, heres jsFiddle его (игнорировать тот факт, что изображение оленьей кожи скользит автоматически, это происходит из-за Ли, имеющую границу!)

Answer 1

Итак, у вас есть несколько вещей, которые происходят. В этом коде есть две проблемы:

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'), так как он будет быстрее.

И наконец, код, ранее представленный, но вот еще один вариант.Изменить свой СЧА, чтобы предыдущие и следующие классы:

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

Затем добавить к вашей функции перехода:

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

Вот рабочая версия:

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

Надежда, что помогает ,

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> 

отключить предыдущую кнопку по умолчанию, так как вы на первом изображении и не хочу идти в обратном направлении.