Jquery切换按钮使用.s兄弟取消选择

Jquery toggle buttons deselect using .siblings

本文关键字：兄弟 取消 选择 按钮 Jquery      更新时间：2023-09-26

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

只能选择一个按钮或不选择任何按钮。也就是说，按钮一开始是褪色的，当用户点击其中一个按钮时，它会亮起，其他两个按钮则保持褪色。

如果用户随后单击另一个按钮，则任何其他按钮都将淡出，用户单击的按钮将突出显示。这不是问题。

当我试图让一个当前高亮显示的按钮恢复到褪色状态时，如果用户点击它，问题就来了，所以你没有高亮显示的按键。

这就是我要做的：

$('.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"类）的情况下，我如何使其正常工作？

实时演示

$(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 }
相关文章：