Question

使用我自己的滑块继续进行实验。现在制作导航箭头。所以我问如何使它工作？我正在使用next（）/ prev（）来检查下一个/上一个输入复选框。但是next（）/ prev（）不起作用。为什么？ Here是代码。

$('.to-right').click(function(){
$('input[type="radio"]:checked').next('input[type="radio"]').prop("checked", true)
});
$('.to-left').click(function(){
$('input[type="radio"]:checked').prev('input[type="radio"]').prop("checked", true)
});

Answer 1

.next()

描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

因此您的代码$('input[type="radio"]:checked').next('input[type="radio"]')将无法获得下一个单选按钮。

你可以尝试：

$('.to-right').click(function(){
   $('input[type="radio"]:checked').next().next('input[type="radio"]').prop("checked", true);
   // first next() will get <div class="slider-content">....</div> in your code
});

与.prev()

相同

修改

=============================================== =======

将班级first和last添加到第一个和最后一个广播

<input type="radio" name="slider" id="1-1" class='first'> 
<input type="radio" name="slider" id="1-5" class='last'>

并首先隐藏to-left导航

检查此 DEMO

通过复选框导航滑块

1 个答案: