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>

我做错了什么？如何更改javascript函数以使其仅选择一个笑脸？

Answer 1

$(this)

click()指的是点击的按钮，而不是点击的div。您需要将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');
});

jQuery选择器麻烦

1 个答案: