jquery 함수로 클래스 분리하기

Question

나는 이것이 간단한 수정이 되었으면 좋겠다. 아니면 내 논리가 방금 꺼 졌을 것이다. 나는 jquery를 사용하여 아코디언 메뉴를 만들고있다. 아코디언의 머리 부분에는 라디오 버튼이 있고 몸 안쪽에는 일정이 있습니다. 사용자가 아코디언을 확장하거나 축소 할 수있게하고 일정을 선택하면 선택한 일정이 밝은 회색 배경의 빨간색으로 윤곽이 그어집니다. 내가 가지고있는 것은 작동하고있다. 그것은 선택된 하나의 요소가 아닌 모든 요소에 화살표 회전과 토글 클래스를 적용하는 것이다.

현재 일정을 클릭하면 모든 화살표가 단일 화살표 대신 회전합니다. 또한 라디오 버튼을 선택하면 "clickedSchedule"클래스로 모든 div를 강조 표시합니다.

이 기능과 관련이 있다고 생각합니다. 필자는이 기능을 어떻게 쓰는지 모르겠습니다. 아마도 나는 이것을 우아한 방식으로 처형하지 않았으므로 나는 모든 제안에 열려있다.

HTML :

<ul id="menu" class="dropdown"> 
    <div class="clickedSchedule"> 
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 1</h2></a> 

    <div class="scheduleChoice" style="text-align:left;"> 
     <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 1" /><label>First Choice</label> 
     <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 1" /><label>Second Choice</label> 
     <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 1" /><label>Third Choice</label> 
    </div> 
     <ul> 
      <li> 

       <div><img src="images/01_fall.gif" width="550" height="334" /></div> 
       <div><img src="images/01_sp.gif" width="550" height="334" /></div> 

      </li> 
     </ul> 
    </li> 
    </div> 

    <div class="clickedSchedule"> 
    <li><a class="expanded"><div class="arrow"></div><h2>Schedule 2</h2></a> 
    <div class="scheduleChoice" style="text-align:left;"> 
     <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label> 
     <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label> 
     <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label> 
    </div> 
     <ul> 
      <li>    
       <div><img src="images/02_fall.gif" width="550" height="334" /></div> 
       <div><img src="images/02_sp.gif" width="550" height="334" /></div> 
      </li> 
     </ul> 
    </li> 
    </div> 
</ul> 

jQuery를

<script> 
//Expand/Collapses Menu & Rotates arrow 
$(document).ready(function() { 
    $("#menu:first li > a").click(function() { 
     $(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("fast"); 
     $("#menu:first li > a > div").toggleClass("arrowUp").toggleClass("arrow"); 
    }); 
}); 
</script> 
<script> 
//highlights chosen Schedule 
$(document).ready(function(){ 

    $("input[name$='first_choice']").click(function(){ 

    var radio_value = $(this).attr("checked"); 

    if(radio_value=='checked') { 
    $("div.clickedSchedule").css({"border-color" : "red", "border-style" : "solid", "border-width" : "1px", "background-color" : "#f6f6f6"}); 
    } 
    }); 
}); 
</script> 

CSS :

나는이 수업을 전환하는 toggleCLass 있습니다.

.arrow { 
    background:url(../images/accordionDropArrow_expanded.png) no-repeat; 
    width:18px; 
    height:17px; 
    float:left; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
} 

.arrowUp { 
    background:url(../images/accordionDropArrow_expanded.png) no-repeat; 
    width:18px; 
    height:17px; 
    float:left; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
} 

어쩌면 나는이 모든 것을 하나로 모으고 있으며,보다 우아한 코딩 솔루션이 있습니다. 나는 바이올린 here

나는 최신 JQuery와 스크립트를 실행하고 있습니다를 추가 한

유래 :

UPDATE의 신에게 그것을 떠날 것이다. 결과에서 첫 번째 선택 항목을 클릭하면 모든 clickedSchedule 클래스가 하나만 선택되는 것을 볼 수 있습니다.

Answer 1

, 나는 그것이 작동시킬 수 있었다. 하지 (: : 선택) 옵션을 내가 입력에 대해 알게되면 내가 사용

스택 문서는

here를 찾을 수 있습니다 그것은 케이크 한 조각이었다.여기

는 jQuery 코드입니다 :

$(document).ready(function(){ 
    $(document).ready(function(){ 
    //add the Selected class to the checked radio button 
    $('input:checked').parent().parent().parent().addClass("clickedSchedule"); 
    //If another radio button is clicked, add the select class, and remove it from the previously selected radio 
    $('input').click(function() { 
     $('input:not(:checked)').parent().parent().parent().removeClass("clickedSchedule"); 
     $('input:checked').parent().parent().parent().addClass("clickedSchedule"); 
    }); 
}); 
}); 

HTML :

<div class="unclickedSchedule"> 
<li><a class="expanded"><h2>Schedule 2</h2></a> 
<div class="scheduleChoice" style="text-align:left;"> 
    <input name="first_choice" id="checkbox_first" type="radio" value="Schedule 2" /><label>First Choice</label> 
    <input name="second_choice" id="checkbox_second" type="radio" value="Schedule 2" /><label>Second Choice</label> 
    <input name="third_choice" id="checkbox_third" type="radio" value="Schedule 2" /><label>Third Choice</label> 
</div> 
    <ul> 
     <li>    
      <div style="width:550px;padding:0 0 0 50px;"><img src="images/animation/02_fall.gif" width="550" height="334" /></div> 
      <div style="width:550px; padding:0 0 20px 50px;;"><img src="images/animation/02_sp.gif" width="550" height="334" /></div> 
     </li> 
    </ul> 
</li> 
</div> 

이 내 원래의 질문에 회전 화살표를 해결하지만,하지 않습니다 강조 표시된 선택을 해결할 때 라디오 버튼이 클릭됩니다.

Answer 2

내가 원하는 것은 사용자가 한 번에 하나의 라디오 버튼 만 선택하도록 제한하는 것입니다. 라디오 버튼 세트를 상호 배타적으로 만들려면 모든 라디오 버튼에 같은 ​​이름을 붙이기 만하면됩니다. 나는이 문제 :

예였다 희망 : 일부 단순화 및 추가 연구 후

<input type="radio" name="choice" id="choice1" /> 
<input type="radio" name="choice" id="choice2" />