在幻灯片中以循环顺序使用jQuery的prev和next功能。

Question

在幻灯片中以循环顺序使用jQuery的prev和next功能。

4

我想问一下为什么以下代码不能按照1、2、3、1、2、3的顺序通过（jsfiddle），当我继续按“下一个”时。

当我在Chrome中打开并运行以下代码时，它无法按照"1,2,3"的顺序运行代码（它停在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;
});

- taika chan

1

这个示例在我的Chrome和Firefox上都可以工作。 - ced-b

你有检查错误日志吗？ - ced-b

@taikachan 清除缓存并重试。或在Chrome浏览器中打开无痕模式。 - Shiladitya

可能是因为使用了 #attr() - 改用 #prop() - 参见这里。我会标记为重复问题。 - kukkuz

可能是重复的问题：当通过JavaScript/jQuery更改值时，多选不会更新。 - kukkuz

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shiladitya · Accepted Answer

这里提供另一种方法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>

希望这可以帮助您解决问题。