CODEWITHSUNDEEP
javascriptjquery-uijquery
Mo.
Mo.

Reputation: 27445

Jquery : how to prevent div function?

I have a div show hide function which is working fine. when I click next button it showing next div unfortunately I don't how to prevent the next function when the fivs are finished. I can show you my so far works here 

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

DEMO

Upvotes: 1

Views: 201

Answers (5)

Jay
Jay

Reputation: 1404

Check out this, I think you can have it with just adding if statement.

http://jsfiddle.net/XBJbs/

Upvotes: 0

user1308615
user1308615

Reputation:

Simply forget about first, last and current class. Try this:

$('#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();
});
​

Demo: http://jsfiddle.net/LY6wY/8/

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

There is no disabled attribute for a div. If you make your next and previous buttons be actual <button>s, it will work http://jsfiddle.net/mendesjuan/LY6wY/4/

If you want to use divs, you can follow mshsayem's suggestion, which needs is much simpler to look at. Or you can use Rodolfo's suggestion, which makes the code longer, but allows you to style the disabled divs differently

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

Upvotes: 3

freakish
freakish

Reputation: 56467

You can use something like this for next click

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

and for prev click:

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

See the Fiddle.

Upvotes: 1

mshsayem
mshsayem

Reputation: 18008

[As an alternative to the solution above(Juan Mendes)] Slightly modified (and it works):

$('#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');

});

Upvotes: 2

Related Questions