我如何通過下一個prev更改單選按鈕

Question

我有我的滑動滑塊，想知道如何通過next和prev按鈕更改單選按鈕，我不擅長js或jquery，如果您可以幫助我我會很樂意:(

  <section class="center slider"> 
      <div class="type"> 
      <label><input type="radio" name="type" value="1" checked /><img src="./images/1.png"></label> 
      </div> 
      <div class="type"> 
      <label><input type="radio" name="type" value="2" /><img src="./images/2.png"></label> 
      </div> 
      <div class="type"> 
      <label><input type="radio" name="type" value="3" /><img src="./images/3.png"></label> 
      </div> 
      <div class="type"> 
      <label><input type="radio" name="type" value="4" /><img src="./images/4.png"></label> 
      </div> 
      <div class="type"> 
      <label><input type="radio" name="type" value="5" /><img src="./images/5.png"></label> 
      </div> 
      <div class="type"> 
      <label> <input type="radio" name="type" value="6"/><img src="./images/6.png"></label> 
      </div> 
      <div class="type"> 
      <label><input type="radio" name="type" value="7" /><img src="./images/7.png"></label> 
      </div> 
     </section> 

     <button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button> 

     <button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button> 

我試圖用一些JS更多：

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button> 

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button> 

dayNavigation = function (direction) { 
    var all = $('.slider input:radio'); 
    var current = $('.slider input:radio:checked'); 
    var index; 
    if (direction == 'slick-prev') { 
     index = all.index(current) - 1;  
    } else { 
     index = all.index(current) + 1;   
    } 

    if(index >= all.size()) index = 0; 
    all.eq(index).click(); 
    return false; 
}; 

Answer 1

您可以使用從JQuery的的eq()功能與.prop()功能相結合，實現這一

這裏的工作小提琴：http://jsfiddle.net/jPfXS/111/

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button> 

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button> 

var index = 0; 
dayNavigation = function (direction) { 
    var curr = $('.slider input[name="type"]:checked'); 
    console.log(curr); 
    if(direction == 'next'){ 
     if(index > 0){ 
      $('input[name="type"]').eq(index-1).prop("checked", true); 
      curr.prop("checked", false); 
      index--; 
     } 
    } 
    else{ 
     if(index < $('input[name="type"]').length - 1){ 
      $('input[name="type"]').eq(index+1).prop("checked", true); 
      curr.prop("checked", false); 
      index++; 
     } 
    } 
};