收音機的Next/Previous按鈕

我正在嘗試添加「Next」&「Previous」按鈕用於收音機風格的導航。收音機的Next/Previous按鈕

HTML

<div class="month-picker"> 
    <button type="buton" class="month-picker-nav" onclick="dayNavigation('prev');">&lt;</button> 
    <fieldset class="month-picker-fieldset"> 
     <input type="radio" name="month" value="day1" id="day1" checked="checked"> 
     <label for="day1" class="month-picker-label">Day 1</label> 
     <input type="radio" name="month" value="day2" id="day2"> 
     <label for="day2" class="month-picker-label">Day 2</label> 
     <input type="radio" name="month" value="day3" id="day3"> 
     <label for="day3" class="month-picker-label">Day 3</label> 
     <input type="radio" name="month" value="day4" id="day4"> 
     <label for="day4" class="month-picker-label">Day 4</label> 
     <input type="radio" name="month" value="day5" id="day5"> 
     <label for="day5" class="month-picker-label">Day 5</label> 
     <input type="radio" name="month" value="day6" id="day6"> 
     <label for="day6" class="month-picker-label">Day 6</label> 
     </fieldset> 
     <button type="buton" class="month-picker-nav" onclick="dayNavigation('next');">&gt;</button> 
</div>

JAVASCRIPT：

dayNavigation = function (direction) { 
    var all = $('.month-picker-fieldset input:radio'); 
    var current = $('.month-picker-fieldset input:radio:checked'); 
    var index; 
    if (direction == 'prev') { 
     index = all.index(current) - 1;  
    } else { 
     index = all.index(current) + 1;   
    }  
    all.eq(index).attr('checked', 'checked'); 
    return false; 
};

小提琴：http://jsfiddle.net/hTgv3/5/

我的問題是，以前的按鈕不起作用，一旦選擇或「點擊」已手動調用，下一個按鈕不再起作用。

來源

2013-02-27 Shannon Hochkins

1很好地風格導航 – 2013-02-27 08:47:47

@ SamuelLiew你是否真的upvoting/downvoting取決於所需的輸出？它關於如何問這個問題！ – 2013-02-27 09:06:54

你應該使用一個點擊，而不是setattribute用來執行正確的動作：

all.eq(index).click();

此外，您還需要檢查，如果該指數大於或等於最大列表大小。如果是，循環返回到第一元件（0）：

if(index >= all.size()) index = 0;

http://jsfiddle.net/samliew/hTgv3/11/

來源

2013-02-27 08:40:39

這完全有效，但如果你不介意我問，任何想法爲什麼setAttribute不起作用？ – aug 2013-02-27 08:43:49

這是因爲一旦您設置了屬性一次，它已經設置。下一次嘗試設置它時，什麼都不會發生，循環會「凍結」。點擊可以取消同一組中的其他無線電。 – 2013-02-27 08:44:52

Thankyou @SamuelLiew，雖然我在下面閱讀James的回覆，但我想知道什麼是最好用？我已經準備好從另一個點擊事件中調用點擊事件是不好的做法？ – 2013-02-27 09:25:48

變化的「ATTR」「託」 .. ALA

all.eq(index).prop('checked', 'checked');

來源

2013-02-27 08:42:07

收音機的Next/Previous按鈕

回答

相關問題