收音机的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按钮

回答

相关问题