다음/이전 라디오 버튼

"다음"& "이전"버튼을 라디오 스타일 탐색에 추가하려고합니다.다음/이전 라디오 버튼

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 멋지게 스타일 탐색 –

ALA @ SamuelLiew 당신은 정말로 원하는 출력에 따라 upvoting/downvoting 있습니까? 그 질문에 대해 어떻게 묻습니다! –

당신은 적절한 조치를 수행하는 대신의 setAttribute의 클릭을 사용해야합니다

all.eq(index).click();

은 또한, 인덱스가 최대 목록 크기보다 크거나 같은 경우 확인해야합니다. 그 경우에는 다시 최초의 요소 (0)에 루프 다음은 "ATTR", "소품"로

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

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

출처

2013-02-27 08:40:39

이것은 완전히 작동하지만, 묻지 않아도된다면 setAttribute가 작동하지 않는 이유는 무엇입니까? – aug

일단 속성을 일단 설정하면 속성이 이미 설정 되었기 때문입니다. 다음에 설정하려고하면 아무 일도 일어나지 않고 루프가 멈 춥니 다. 클릭하면 같은 그룹의 다른 라디오가 해제됩니다. –

감사합니다 @ SamuelLiew, 제임스의 답변을 아래에서 읽었지만 사용하는 것이 더 나은지 궁금합니다. 일반적으로 다른 클릭 이벤트에서 클릭 이벤트를 호출하는 것은 나쁜 습관 일 수 있습니다. –

변화 ..

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

출처

2013-02-27 08:42:07

다음/이전 라디오 버튼

답변

관련 문제