CODEWITHSUNDEEP
phpjqueryhide
Joseph Mok
Joseph Mok

Reputation: 97

Hide "next" button on last item

I have several divs that visitors can flip through with "previous" and "next" buttons. This is the code I wrote, which works fine:

$("#next").click(function(){
    $(".open").removeClass("open").fadeOut(200, function(){ // remove .open from current opened detail and fade out
        $(this).next(".outsourcing").addClass("open").fadeIn(400); // add .open to next detail and fade in
        if ($(".open").hasClass(".item<?php echo $outsourcing_count-1; ?>")) {
            $("#next").hide();
        }
    })
});

On the last item, I'd like to hide the "next" button. The last item isn't the last child in the containing div so I used PHP to tag it with a special class as you can see in the if statement above. But the if statement doesn't seem to be firing, any thoughts? Thanks!

Upvotes: 0

Views: 287

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You don't need to use a PHP injected value to test if it is the last item 

if ($(".open").is(':last-child')) 
{
      // must be the last item
}

will do, or (if it is not the last child in that container) just check if there is a next item:

if (!$(".open").next(".outsourcing").length) 
{
      // must be the last item
}

You get the idea anyway. Just test for a specific DOM configuration, rather than messing about with panel numbering. You should not add dependencies if you don't need to.

Upvotes: 0

Alok
Alok

Reputation: 522

remove "." before item .. you don't have to give class Identifier when you are using hasClass

 if ($(".open").hasClass("item<?php echo $outsourcing_count-1; ?>")) {
            $("#next").hide();
        }

Upvotes: 1

Related Questions