Jquery: как предотвратить функцию div?

Question

У меня есть функция div show hide, которая работает нормально. когда я нажимаю кнопку «Далее», она показывает следующий div, к сожалению, я не могу предотвратить следующую функцию, когда fivs закончены. Я могу показать вам мои работы здесь

    <div id="prev">Prev</div >
    <div id="next">Next</div >
    <hr /> 

<div id="main">   
    <div id="div1" class="first current">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3" class="last">Div 3</div>    
</div>
​
$('#next').click(function() {
    $('.current').removeClass('current').hide().next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide().prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});​

ДЕМО

Answer 1

Нет атрибута disabled для div. Если вы сделаете ваши следующие и предыдущие кнопки актуальными <button>s, они будут работать http://jsfiddle.net/mendesjuan/LY6wY/4/

Если вы хотите использовать div s, вы можете следовать предложению mshsayem, на которое нужно взглянуть гораздо проще. Или вы можете использовать предложение Родольфо, которое удлиняет код, но позволяет по-разному стилизовать отключенные элементы div

$(function() {
  var $next = $('#next'),
      $prev = $('#prev');

    $next.click(function () {
      if ($next.hasClass('disabled')) {
        return;
      }
      $('.current').removeClass('current').hide().next().show().addClass('current');
      if ($('.current').hasClass('last')) {
        $next.addClass('disabled');
      }
      $prev.removeClass('disabled');
  });

  $prev.click(function () {
      if ($prev.hasClass('disabled')) {
        return;
      }

      $('.current').removeClass('current').hide().prev().show().addClass('current');
      if ($('.current').hasClass('first')) {
        $prev.addClass('disabled');
      }
      $next.removeClass('disabled');
  });
});

Answer 2

[В качестве альтернативы вышеуказанному решению (Хуан Мендес)] Немного доработано (и работает):

$('#next').click(function() {
    if ($('.current').hasClass('last'))return; 
    $('.current').removeClass('current').hide().next().show().addClass('current');

});

$('#prev').click(function() {
      if ($('.current').hasClass('first'))return;
      $('.current').removeClass('current').hide().prev().show().addClass('current');

});

Answer 3

Просто забудьте о first, last и current классе. Попробуйте это:

$('#next').click(function() {
    $('#main > div:visible').hide()
        .next().show();
    if ($('#main > div:visible').attr('id') === 'div3') {
        $(this).hide();
    }
    $('#prev').show();
});   
$('#prev').click(function() {
    $('#main > div:visible').hide()
        .prev().show();

    if ($('#main > div:visible').attr('id') === 'div1') {
        $(this).hide();
    }
    $('#next').show();
});
​

Демо: http://jsfiddle.net/LY6wY/8/

Answer 4

Вы можете использовать что-то подобное для next клика

if ($('.current').next().length)
    // the rest of the code

и для prev нажмите:

if ($('.current').prev().length)
    // the rest of the code

См. Скрипка .

Answer 5

Проверьте это, я думаю, вы можете получить его, просто добавив оператор if.

http://jsfiddle.net/XBJbs/