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

我的页面上有4个div和一个按钮。如果您单击一个div，它将切换lass

单击按钮时，我希望所有高亮显示的div保持高亮显示，但我不希望在单击按钮后再切换任何div

有办法做到这一点吗

我的代码是这样的：

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();
});

---

使用

.off（）

解除单击事件的绑定：

如果希望只调用一次绑定的事件处理程序，请使用方法。例如

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

您可以使用事件侦听器（这与较早和最新版本的jQuery兼容）：

布尔型，完整示例：

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

---

---

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

为什么不使用addClass，而不是toggleClass。我不认为这是问题所在。他希望能够切换类（不只是一次，可能多次），直到按钮被点击。这对我不起作用。即使我点击了按钮，我仍然可以切换类如果我用“悬停”而不是“点击”怎么办？为什么它不起作用？它对“click”非常有效，但对“hover”不起作用。因为hover实际上是mouseenter和mouseleave事件的jQuery快捷方式。如果我有“hover”，有没有办法做同样的事情？

$（'.options'）.off（'mouseenter mouseleave'）

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

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

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

$(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

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