jquery関数でクラスを分離する

Question

これは簡単な修正であると思っています。私はjqueryを使用してアコーディオンメニューを作成しています。アコーディオンの頭にはラジオボタンがあり、体の中にはスケジュールがあります。ユーザーがアコーディオンを展開したり折りたたんだりすることができ、スケジュールが選択されると、選択されたスケジュールは赤色で明るい灰色の背景で輪郭が描かれます。私が持っているのは働いているだけで、選択した単一の要素ではなく、すべての要素に矢印の回転とトグルクラスを適用するだけです。

現在、「スケジュール」をクリックすると、すべての矢印が1つではなく回転しています。また、ラジオボタンが選択されている場合、 "clickedSchedule"クラスですべてのdivを強調表示しています。

私はこれが関数で（this）を使用することと関係があると思います...私はそれをどのように書くか分かりません。おそらく、私はこれを優雅な方法で実行していないので、私はすべての提案に公開しています。

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のスクリプトを実行していますが追加されている

stackoverflowの:)

UPDATEの神々にそれを残します。結果の最初の選択肢をクリックすると、clickedScheduleクラスが1つではなくすべて選択されていることがわかります。

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

私は一度に1つのラジオボタンだけを選択するようにユーザーを制限することを推測します。 ラジオボタンのセットを排他的にするには、すべてのラジオボタンに同じ名前を追加します。私は、これはあなたの問題だった願っています:)

例：

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