在jquery函数中隔离类

我希望这是一个简单的解决方案，或者我的逻辑是错误的。我正在使用jquery创建一个手风琴菜单。手风琴的琴头上有单选按钮，琴身上有时间表。我希望用户能够展开和折叠手风琴，当选择一个时间表时，所选时间表将以浅灰色背景以红色勾勒出来。我所做的是工作，它只是将箭头旋转和toggleClass应用于每个元素，而不是单个选定元素

当前发生的情况是，当您单击“计划”时，所有箭头都在旋转，而不是单个箭头。此外，当选择单选按钮时，它将使用“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>

$(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");
    });
});
});

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

也许我只是把这些东西组合在一起，有一个更优雅的编码解决方案。我将把这件事交给世界的诸神：）

更新

我加了一把小提琴

---

我正在运行最新的jquery脚本。如果在结果中单击first choice，您可以看到它正在选择每个clickedSchedule类，而不仅仅是一个

我想您想要的是限制用户一次只能选择一个单选按钮。 要使一组单选按钮互斥，只需将相同的名称添加到所有单选按钮。我希望这是你的问题：）

例如：

---

经过一些简化和进一步的研究，我能够让它工作

我使用的堆栈文章可以找到

一旦我了解了input:not（：checked）选项，那就轻而易举了

以下是jQuery代码：

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

$(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");
    });
});
});

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

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>

$(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");
    });
});
});

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

附表2
首选
第二选择
第三选择

---

这并没有解决我原来问题中的旋转箭头问题，但确实解决了单击单选按钮时突出显示的选择。

protip：除非你运气好，否则你必须在尝试隔离问题时至少表现出一些努力。没有人会通读你的整个代码库，然后“修复它”。Esailija说得很好。如果你在问题上挑拨离间，你会得到更快更好的答案。@Esailija>我认为那不是很多代码，肯定不是我的整个代码库。我听到了更多关于没有发布足够代码的负面回应。此外，我也不希望有人“修复它”。堆栈溢出是方向和错误检查的重要资源。我只是想了解一下。用户只能选择一个电台。我遇到的问题是jquery函数。该函数当前正在切换类名为ArrowUp的所有div，而不是特定的div。请为每个div添加一个rel属性。例如：$（“.ArrowUp”）.attr（“rel=””+$（this.id+”）；我刚才提到了逻辑，希望您理解。啊，很抱歉误解。我将运行它。