jQuery選擇器故障

我在頁面上有一堆表情符號，必須選擇它。我試圖實現一個基於jQuery的解決辦法，但我堅持在這個階段，在多個表情越來越選擇：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>

我在做什麼錯？如何更改javascript功能以使其僅選擇一個笑臉？

來源

2012-02-09 sniper

工作正常的http：//的jsfiddle .net/xJjFS/ – 2012-02-09 07:22:47

嘿Gaurav。價值得到正確分配。那是因爲，$（'＃rating'）。val（$（this）.val（））;仍然可以工作，因爲$（this）仍然指向按鈕。問題出在用戶界面，我剛纔點擊的笑臉不會取消以前點擊過的笑臉。 – sniper 2012-02-09 07:33:54

oh k ..曲解了這個問題 – 2012-02-09 08:46:57

$(this)您click()函數內部是指被點擊的按鈕，不被點擊的股利。您需要將selected類添加到$(this).parent()。
siblings()返回的元素不是代表其他笑臉的div，而是此笑臉的其他元素（在這種情況下，div.smiletitle）。

要獲得其他表情的列表，您應該查看$(this).parent().siblings()。

如果您的按鈕就是代表笑臉，那麼你應該遍歷其它表情是這樣的：

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

，並讓他們分別獲得取消：

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

來源

2012-02-09 07:23:56 bdares

嘿bdares。笑臉正在被選中。但是，當我選擇另一個笑臉時不會被取消選擇。我嘗試了$（this）.parent（）。siblings（）。removeClass（'selected'）。addClass（'unselected'）;正如你所建議的那樣，它仍然不起作用。 :( – sniper 2012-02-09 07:32:47

謝謝一堆！:) – sniper 2012-02-09 07:39:40

jQuery選擇器故障

回答

相關問題