通过复选框导航滑块

Question

继续用我自己的滑块进行实验。现在制作导航箭头。所以我问如何让它工作？我正在使用 next()/prev() 使 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()

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

因此您的代码 $('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()

edit

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

将 class 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

通过复选框导航滑块

Navigation for slider by checkbox

checkbox

jquery

slider

radio