下一步/上一步按钮适用于单选按钮

Question

我正在尝试向单选样式导航添加“下一个”和“上一个”按钮。

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

Fiddle: http://jsfiddle.net/hTgv3/5/

我的问题是前一个按钮无法正常工作，并且一旦手动选择或“点击”被调用，下一个按钮就不再起作用。

- Shannon Hochkins

Answer 1

你应该使用click而不是setAttribute来执行正确的操作：

all.eq(index).click();

此外，您需要检查索引是否大于或等于最大列表大小。如果是，则循环回第一个元素（0）：

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

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

- Samuel Liew

---

这完全有效，但是如果你不介意我问一下，你知道为什么setAttribute不起作用吗？ - aug

这是因为一旦你设置了属性，它就已经被设置了。下一次尝试设置它时，什么也不会发生，循环“冻结”。单击会取消同一组中的其他单选按钮。 - Samuel Liew

谢谢@SamuelLiew，虽然我已经阅读了下面James的回答，但我想知道什么更好用？我已经听说在一个点击事件中调用另一个点击事件是不好的做法。 - Shannon Hochkins

Answer 2

将 "attr" 改为 "prop"。 ala

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

- james emanon