Question

这是我的第一个问题，我的编码技巧很少，所以请光临我。

我正在使用bootstrap和jquery来控制一组切换按钮，以及按下那些按钮后的影响。 HTML按钮切换由data-toggle =“button”：

控制

<div class="btn-group" data-toggle="buttons-radio" style="margin-left:5px">
    <button id="fullWidth" class="btn btn-toggle" data-toggle="button">full</button>
    <button id="halfWidth" class="btn btn-toggle" data-toggle="button">half</button>
</div>
<button id="flight" class="btn btn-toggle" data-toggle="button">Flight</button>
<button id="derived" class="btn btn-toggle" data-toggle="button">Derived</button>

和我的js段（位于mo的网页底部）如下：

        $('.btn-toggle').click(function() {
        if (($('#derived').hasClass('active')) && ($("#flight").hasClass('active'))){
            DO SOME STUFF
        }
        else if ($("#derived").hasClass('active')){
            DO SOME STUFF               
            if ($("#halfWidth").hasClass('active')){
            DO SOME STUFF               
            }
            else {
            DO SOME STUFF               
            }
        }
        else if ($("#flight").hasClass('active')){
            DO SOME STUFF               
            if ($("#halfWidth").hasClass('active')){
            DO SOME STUFF
            }
            else {
            DO SOME STUFF
            }
        }
        else {
        DO SOME STUFF
        }
    });

我的问题是，在切换更改之前，JS会检查切换按钮的状态。我希望能够先选择更改选项，然后让js在之后运行它的检查。

感谢您的帮助。

Answer 1

bootstrap切换按钮只是一个常规按钮，单击时会更改其CSS类。不幸的是，在调用bootstrap来更改类之前，'onclick'的回调会运行。你可以自己制作引导程序'custom-toggle-btn'扩展常规'btn'，然后手动切换'active'类作为onclick函数的第一行。像这样：

$('.custom-btn-toggle').click(function() {

    $(this).toggleClass('active'); // Add this line – note the change in class-name above

    if (($('#derived').hasClass('active')) && ($("#flight").hasClass('active'))){
        DO SOME STUFF
    }
    ...

Answer 2

您可以使用自定义active类，而不是定义自定义按钮。您必须同时使用jQuery click和toggleClass函数。首先，添加一个单独的类（例如，checked），然后在click回调中添加以下内容：

callback = function() {
  $(.btn-toggle).toggleClass('checked');
  $(.btn-toggle).hasClass('checked');
  // do your checks and other stuff
}

$(.btn-toggle).click(callback);

Answer 3

您可以尝试使用jQuery的.toggle（）函数代替.click（）函数。

您可以在The jQuery API中搜索，看看您需要什么！

切换任何按钮后，检查多个按钮的切换状态

3 个答案: