选择下一个/上一个单选按钮与外部按钮

Question

我正在制作一种幻灯片形式，并且当用户单击下一张图像幻灯片时，还必须选择单选按钮。我得到了滑动工作，'下一个按钮'也在工作，但我有点卡住'prev'按钮。不明白为什么它不起作用。

（fiddle）

这是我走到这一步，HTML：

<form> 
<div> 
    <div class="button prev">&#60;</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">&#62;</div> 
</div> 
<div> 
    <div class="button prev">&#60;</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">&#62;</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"); 
});}); 

Answer 1

它可以简化为

$(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); 
    }); 
}); 

演示：Fiddle

---

同样使用：有选择器

$(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); 
    }); 
}); 

演示：Fiddle

Answer 2

可以使用.prop()代替.attr()，您可以简化为这样：

$(document).ready(function(){ 
    $('.prev').click(function(){ 
     $(this).next().find(':checked').parent().prev().find('input').prop("checked", true); 
    }); 

    $('.next').click(function(){ 
     $(this).prev().find(':checked').parent().next().find('input').prop("checked", true); 
    }); 
});