選擇下一個/上一個單選按鈕與外部按鈕

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