我想问为什么下面的代码不能依次通过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;
});
最佳答案
在这里,您可以采用另一种方法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>
希望这可以帮助您解决问题。
关于jquery - jQuery prev和next在幻灯片中的顺序重复,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45625672/