我正在制作一种幻灯片形式,当用户单击下一张图像时,还必须选择单选按钮。我的滑动功能可以正常工作,“下一个按钮”也可以工作,但我有点坚持使用“上一个”按钮。不明白为什么它不起作用。
(fiddle http://jsfiddle.net/V4tdx/)
这是我到目前为止得到的 HTML:
<form>
<div>
<div class="button prev"><</div>
<ul>
<li>
<input type="radio" id="choise_1" name="first_choise" checked="checked"/>
<label for="choise_1">One</label>
</li>
<li>
<input type="radio" id="choise_2" name="first_choise"/>
<label for="choise_2">Two</label>
</li>
<li>
<input type="radio" id="choise_3" name="first_choise"/>
<label for="choise_3">Three</label>
</li>
</ul>
<div class="button next">></div>
</div>
<div>
<div class="button prev"><</div>
<ul>
<li>
<input type="radio" id="choise_1" name="second_choise" checked="checked"/>
<label for="choise_1">One</label>
</li>
<li>
<input type="radio" id="choise_2" name="second_choise"/>
<label for="choise_2">Two</label>
</li>
<li>
<input type="radio" id="choise_3" name="second_choise"/>
<label for="choise_3">Three</label>
</li>
</ul>
<div class="button next">></div>
</div></form>
jQuery:
$(document).ready(function(){
$('.prev').click(function(){
$(this).next().find('input:checked').parent().prev().children('input').attr("checked", true);
$(this).next().find('input:checked').last().removeAttr("checked");
});
$('.next').click(function(){
$(this).prev().find('input:checked').parent().next().children('input').attr("checked", true);
$(this).prev().find('input:checked').eq(0).parent().prev().children('input').removeAttr("checked");
});});
可以简化为
$(document).ready(function(){
$('.prev').click(function(){
$(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);
});
$('.next').click(function(){
$(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);
});
});
Demo: Fiddle http://jsfiddle.net/arunpjohny/LHYJL/
同样使用 :has-selector
$(document).ready(function(){
$('.prev').click(function(){
$(this).parent().find('li:has(input:checked)').prev().children('input').prop("checked", true);
});
$('.next').click(function(){
$(this).parent().find('li:has(input:checked)').next().children('input').prop("checked", true);
});
});
Demo: Fiddle http://jsfiddle.net/arunpjohny/LHYJL/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)