Question

我有一组按钮，可以在动态页面中执行特定操作。我希望这些按钮中的一些是切换按钮，所以当我点击其中一个按钮时，按钮会将原始图像转换为第二个图像，再次单击时，第二个图像再次变为第一个图像。我已经决定执行我的按钮功能的div是“.OptLvl3Tack”类。我认为我可以使用background css属性更改图像，但由于css仅处理伪事件hover，visited，...，但没有click事件，我认为除了使用Javascript之外别无选择。我已经设计了这样的代码：

function IfNoTacked(Tack){
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')");
    $(Tack).click(function(){IfTacked($(Tack))});
}
function IfTacked(Tack){
    $(Tack).css("background", "url('{{ STATIC_URL }}ThumbTack.png')");
    $(Tack).click(function(){IfNoTacked($(Tack))});
}   
$(".OptLvl3Tack").each(function(){$(this).click(function(){IfNoTacked($(this));})});

代码工作正常，但是当我点击一个按钮，比方说，在不到10秒的时间内30次，我的计算机速度变慢，所以我必须在整个计算机崩溃之前强制关闭Web浏览器。我的桌面是intel i3处理器，4GB内存，所以我认为这个问题与javascript的密集使用有关。这是对的吗？或者是与DOM相关的问题？有没有不同的方法来使用JavaScript执行此操作？不使用javascript？

Answer 1

我认为每次新的点击处理程序都会附加。一段时间后，您的处理程序将被执行几次。

尝试删除处理程序或记住变量中按钮的状态，并在单击处理程序中决定要执行的操作。

Answer 2

很可能是因为你使用了每个。 Afaik你不必使用它：

$(".OptLvl3Tack").click(function() {
IfNoTacked($(this));
});

但我会把它全部改为1：

$(".OptLvl3Tack").click(function() {
    if($(this).hasClass('active')) {
        $(this).css("background", "url('{{ STATIC_URL }}ThumbTack.png')");
        $(this).removeClass('active')
    } else {
        $(this).css("background", "url('{{ STATIC_URL }}ThumbTack_Click.png')");
        $(this).addClass('active')
    }
});

经过精心设计的切换按钮可在密集使用后减慢计算机速度

2 个答案: