Search code examples
jqueryjquery-selectorsslideshow

jquery prev and next in slideshow in order repeatedly


I would like to ask why the following code cannot go through 1,2,3,1,2,3 in order (jsfiddle)
while I continue to press "next".

When I open and run the following code in Chrome it fails to run the code in order with "1,2,3" (it stops at 3).

HTML

<div id="slides">
   <ul class="options-list">
   <li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option"checked="checked" value="73"></li>
   <li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
   <li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</div>

<div id="buttons">
   <a href="#" id="prev">prev</a>
   <a href="#" id="next">next</a>
   <div class="clear"></div>
</div>

JS

$('#next').click(function() {
    var $all     = $('.getradiotomove');
    var $current = $('.getradiotomove:checked');

    var index = $all.index($current) + 1;
    if(index >= $all.length)
        index = 0;
    $($all[index]).attr('checked', 'checked');
    return false;
});

Solution

  • Here you go with one more approach http://jsfiddle.net/hTgv3/162/

    $('#next').click(function() {
        if($('.getradiotomove:checked').parent().is(':last-child')){
        	$('ul[class="options-list"] > li')
          	.first()
            .find('.getradiotomove')
    	      .prop('checked', true);
        } else {
        	$('.getradiotomove:checked')
            .parent()
            .next('li')
            .find('.getradiotomove')
            .prop('checked', true);
        } 
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="slides">
        <ul class="options-list">
            <li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked></li>
            <li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
            <li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
        </ul>
    </div>
    
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>

    Hope this will help you solve the problem.