jQueryセレクターのトラブル

Question

私はページ上にたくさんのスマイリーを持っています。クリックすると選択が必要です。私はjqueryのベースのソリューションを実装してみましたが、複数のスマイリーを選択得ているこの段階で立ち往生しています：

<div class="smiles_feed"> 
    <input type="text" id="rating" value="" name="rating" class="displaynone" /> 
    <div style="float:left;width:auto;text-align:Center;"> 
     <button type="button" class="awesomesmile" class="unselected" value="Awesome" style="margin-bottom:0px;"></button> 
     <div class="smiletitle" style="font-size:9pt;color:white;">Yummy!</div> 
    </div> 
    <div style="float:left;width:auto;text-align:Center;"> 
     <button type="button" class="goodsmile" class="unselected" value="Good" style="margin-bottom:0px;"></button> 
     <div class="smiletitle" style="font-size:9pt;color:white;">Good!</div> 
    </div> 
    <div style="float:left;width:auto;text-align:Center;"> 
     <button type="button" class="okaysmile" class="unselected" value="Okay" style="margin-bottom:0px;"></button> 
     <div class="smiletitle" style="font-size:9pt;color:white;">Okay!</div> 
    </div> 
    <div style="float:left;width:auto;text-align:Center;"> 
     <button type="button" class="yucksmile" class="unselected" value="Yuck" style="margin-bottom:0px;"></button> 
     <div class="smiletitle" style="font-size:9pt;color:white;">Yuck!</div> 
    </div> 
</div> 

<script type='text/javascript'> 
    $(function(){ 
     // Smile Click Function 
     $('div.smiles_feed :button').click(function(){ 
      $(this).removeClass('unselected').addClass('selected'); 
      $(this).siblings().removeClass('selected').addClass('unselected'); 
      $('#rating').val($(this).val()); 
      //alert($('#rating').val()); 
     }); 
    }); 
</script> 

私が間違っているのか？どのように私は1つだけのスマイリーを選択するようにjavascript関数を変更するのですか？あなたのclick()関数内

Answer 1

1. $(this)クリックされたボタンではなく、クリックされたdiv要素を指します。 $(this).parent()にselectedクラスを追加する必要があります。
2. siblings()によって返される要素は、他のスマイリーを表すdivではなく、このスマイリーの他の要素（この場合はdiv.smiletitle）です。

他のスマイリーのリストを取得するには、$(this).parent().siblings()を参照する必要があります。

あなたのボタンがスマイリーを表す内容であれば、あなたはこのような他のスマイリー横断する必要があります。

$(this).parent().siblings().children('button') 

とそれぞれが選択解除されますそれらを作る：

$(this).parent().siblings().children('button').each(function(){ 
    $(this).removeClass('selected') 
    .addClass('deselected'); 
});