我正在尝试将“Next”和“Previous”按钮添加到收音机样式导航中。
HTML
<div class="month-picker"> <button type="buton" class="month-picker-nav" onclick="dayNavigation('prev');"><</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');">></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/
我的问题是前一个按钮不起作用,一旦手动调用选择或“点击”,下一个按钮不再有效。
I'm trying to add "Next" & "Previous" buttons to a radio style navigation.
HTML
<div class="month-picker"> <button type="buton" class="month-picker-nav" onclick="dayNavigation('prev');"><</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');">></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/
My problem is that the previous button doesn't work, and once the selection or "click" has been invoked manually, the next button no longer works.
最满意答案
您应该使用单击而不是setAttribute来执行正确的操作:
all.eq(index).click();此外,您需要检查索引是否大于或等于最大列表大小。 如果是,则循环回第一个元素(0):
if(index >= all.size()) index = 0;http://jsfiddle.net/samliew/hTgv3/11/
You should use a click instead of setAttribute to perform the proper action:
all.eq(index).click();Also, you need to check if the index is greater or equal to the max list size. If it is, loop back to first element (0):
if(index >= all.size()) index = 0;http://jsfiddle.net/samliew/hTgv3/11/
更多推荐
发布评论