jquery - 每个 div 只选择一个选项

Question

我有一组带有选项的 div，我已经编写了一些只选择一个选项的 jQuery。

现在我只想为每个 div（class=blahblah）选择一个选项（class=choice）。

这是HTML：

<div class="blahblah"id="finish_colour">
<div class="choice"></div>
<div class="choice"></div>
<div class="choice"></div>
</div>

<div class="blahblah"id="main_colour">
<div class="choice"></div>
<div class="choice"></div>
<div class="choice"></div>
</div>

这是jQuery：

$('.choice').click(function(){

    $('.choice').not(this).removeClass('selected_choice');
    $(this).toggleClass('selected_choice');
});

div 都具有相同的类，但如果有任何帮助，则 id 不同。

Answer 1

你可以试试这样的...

$('.choice').click(function(){
    var myDiv = $(this);
    $('.choice').removeClass('selected_choice');
    myDiv.toggleClass('selected_choice');
});

Answer 2

假设你的 html 是这样的，

<div>
  <div class="choice"></div>
  <div class="choice"></div>
  <div class="choice"></div>
</div>

您可以将其修改为像这样的每个 div，

$('.blahblah .choice').click(function(){
    $(this).siblings('.choice').removeClass('selected_choice');
    $(this).toggleClass('selected_choice');
});