1

我正在使用引导程序和 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 运行它之后的检查。

4

3 回答 3

1

引导切换按钮只是一个常规按钮，单击时会更改其 CSS 类。不幸的是，您的“onclick”回调在调用引导程序以更改类之前运行。您可以制作自己的引导程序“custom-toggle-btn”扩展常规“btn”，然后手动切换“活动”类作为 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
    }
    ...
于 2013-02-25T23:19:31.027 回答
0

您可以使用自定义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);
于 2014-10-27T18:42:59.710 回答
-1

您可以尝试使用 jQuery 的 .toggle() 函数而不是 .click() 函数。

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

于 2013-01-18T18:15:51.180 回答