Question

我的页面上有4个div和一个按钮。如果你单击一个div，它就会切换到。

单击按钮，我希望突出显示的所有div都保持高亮显示，但是在单击按钮后我不希望更多div到toggleClass。

有办法做到这一点吗？

我的代码是这样的：

function submit() {
//this is the function I do not know how to define
};

function choose() {
    $('.options').click(function() {
        $(this).toggleClass('highlighted');
    });
    return;
};

$(document).ready(function() {
    $('body').append('<div class="options">option1</div>');
    $('body').append('<div class="options">option2</div>');
    $('body').append('<div class="options">option3</div>');
    $('body').append('<div class="options">option4</div>');
    $('body').append('<button onclick=submit()>Submit</button>');
    choose();
});

我一直在寻找一种方法来停止choose（）函数。创建变量goOn并在按钮点击时将其值更改为false，加上下面的代码位没有帮助。

var goOn = true;
while (goOn) {
    choose();
};

Answer 1

使用.off()取消绑定点击事件：

function submit() {
    $('.options').off('click')
};

<强> jsFiddle example

Answer 2

如果希望仅调用绑定事件处理程序一次，请使用.one方法。 E.g。

 $('.options').one( "click", function() {
        $(this).toggleClass('highlighted');
    });

Answer 3

你可以unbind事件监听器（这与旧的和最新版本的jQuery兼容）：

function choose() {
    $('.options').click(function () {
        $(this).toggleClass('highlighted');
    });
    return;
};
choose();
$('button').click(function () {
    $('.options').unbind('click');
});

Fiddle

Answer 4

function choose() {
$('.options').click(function() {
    $(this).toggleClass('highlighted');
    if ($('.options').length == $('.highlighted').length)
    {
      $('.options').off('click');
    }
});
return;};

http://jsfiddle.net/G7mb3/2/

Answer 5

布尔值，完整示例：

jsFiddle Demo

<强>的javascript / jQuery的：

$(document).ready(function() {

ok2toggle = 1;

$('body').append('<div class="options">option1</div>');
$('body').append('<div class="options">option2</div>');
$('body').append('<div class="options">option3</div>');
$('body').append('<div class="options">option4</div>');
$('body').append('<button id="mySubmit">Submit</button>');

choose();

function choose() {
    $('.options').click(function() {
        if (ok2toggle==1)
            $(this).toggleClass('highlighted');
    });
    return;
};

$('#mySubmit').click(function() {
    ok2toggle = 0;
});

}); //END document.ready

或者，将submit sub更改为使用Submit按钮作为切换：

Revised jsFiddle：

$('#mySubmit').click(function() {
    ok2toggle = !ok2toggle;
});

请注意，您的提交按钮中添加了一个ID，并删除了内联javascript（从来不是一个好主意）。

如何在按下按钮时停止toggleClass（）？

5 个答案: