使用.siblings取消选择Jquery切换按钮

Question

我正在尝试制作一个界面元素，其中有三个按钮。

只能选择一个按钮或一个按钮。也就是说，从一开始，按钮就会褪色，当用户单击其中一个就会亮起，另外两个就会褪色。

如果用户然后单击另一个按钮，任何其他按钮都会消失，用户单击的按钮会突出显示。这不是问题。

当我试图使一个当前突出显示的按钮返回到褪色状态时，如果用户单击它，那么问题就会出现，所以您将没有突出显示的按钮。

这就是我要去的地方

$('.gradeButtons button').click(function() {
        if (!$(this).siblings().hasClass('quoteGrading'))
        {
            $('.gradeButtons button').addClass('quoteGrading')
        }
        if (!$(this).hasClass('quoteGrading'))
        {
            $(this).addClass('quoteGrading')
        } else {

            $(this).removeClass('quoteGrading')
        }

    })

我的HTML：

<div class="control-group gradeButtons">
            <button type="button" class="btn btn-danger quoteGrading">H</button>
            <button type="button" class="btn btn-warning quoteGrading">W</button>
            <button type="button" class="btn btn-info quoteGrading">C</button>
            </div>

“quoteGrading”提供了消失的/非活动的效果。

如果只有一个或一个按钮可以高亮显示(没有应用“quoteGrading”类)，我如何使它正常工作？

Answer 1

Live Demo

$(function() {
  $('.gradeButtons button').on("click",function() {
    $(this).siblings().removeClass('quoteGrading');
    $(this).toggleClass('quoteGrading');
    $("input.inp").hide();
    $("#"+this.id+"input").toggle($(this).hasClass("quoteGrading"));  
  });
});

使用

<div class="control-group gradeButtons">
  <button type="button" id="H" class="btn btn-danger">H</button>
  <button type="button" id="W" class="btn btn-warning">W</button>
    <button type="button" id="C" class="btn btn-info">C</button><br />
  <input type="text" class="inp" placeholder="H - message" id="Hinput" /><br/>  
  <input type="text" class="inp" placeholder="W - message" id="Winput" /><br/>  
  <input type="text" class="inp" placeholder="C - message" id="Cinput" /><br/>  
</div>

和

.quoteGrading { color:red }
.inp { display:none }