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 }

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

1 个答案: