Question

This is my code:

<div class='silderitem'>
Some Content
</div>

<div class='silderitem'>
Another Some Content
</div>

<div class='silderitem'>
Again Another Some Content
</div>

<a class="next">next</a>

I want to change the next class when i click “next” using jquery. I tried this, but it doesn’t work.

<script>
$(document).ready(function(){
    var Slideshow=$('.slideritem');
    $(".next").click(function(){slideshow.next();return false});
</script>

Can anyone tell me the solution please ?

Answer 1

If you wanted to cycle through items, hiding the ones that aren’t selected, something like this might work: jsfiddle

css:

.silderitem { display: none }
.next { cursor: pointer }​

jquery:

$('.selected').show();

$(".next").click(function(){
    var selected = $('.selected');
    selected.removeClass('selected');
    selected.hide();

    var next = selected.next(".silderitem");
    if(next.length === 0) {
        next = $(".silderitem").first();
    }
    next.addClass('selected');
    next.show();
});​

html:

<div class='silderitem selected'>
Some Content
</div>

<div class='silderitem'>
Another Some Content
</div>

<div class='silderitem'>
Again Another Some Content
</div>

<a class="next">next</a>