Question

当您运行此代码（请参阅链接）并且WIDTH大于600px时，链接将变为绿色且可单击。如果您使用MIDDLE栏减小分辨率小于600px，链接将变为红色，链接将被禁用。这很好！

问题是如果你在屏幕小于600px时最初运行代码，代码将变为红色，是的，但是如果你使用MIDDLE条增加分辨率，链接将不转回绿色。我正在尝试让jquery以适当的方式运行。

（我正在寻找一个这样的简单插件，而不需要更大的库）

我做错了什么，所以我可以让jquery以适当的分辨率运行？

var eventFired = 0;

if ($(window).width() > 600) {
    $('a').css( "color", "green" );
}
else {
    $('a').click(false);
    $('a').css( "color", "red" );
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() > 600) { //larger than 600 res
            $('a').unbind('click'); //enable click
            $('a').css( "color", "green" ); //change to green
        } else { //smaller than 600 res
            $('a').click(function () {return false;});//disable click
            $('a').css( "color", "red" ); //change to red
        }
    }
});

Answer 1

最初运行代码时，eventFired设置为1。事件处理程序（!eventFired）中的条件永远不会成立，因此不会发生任何操作。

Answer 2

只需移除任何引用eventFired的内容即可。你真的不需要这个。

DEMO

//var eventFired = 0;

if ($(window).width() > 600) {
    $('a').css( "color", "green" );
}
else {
    $('a').click(false);
    $('a').css( "color", "red" );
    //eventFired = 1;
}

$(window).on('resize', function() {
    //if (!eventFired) {
        if ($(window).width() > 600) { //larger than 600 res
            $('a').unbind('click'); //enable click
            $('a').css( "color", "green" ); //change to red
        } else { //smaller than 600 res
            $('a').click(function () {return false;});//disable click
            $('a').css( "color", "red" ); //change to green
        }
    //}
});

Jquery Resize Resolution Vice Versa

2 个答案: