jQuery if语句徽标有问题。没有回应我的期望

我的网站的基本前提是六个大框，当你点击它们中的任何一个时，它们会缩小成一个图形菜单栏。为“主页”按钮添加了一个额外的图标

为了在第一个网格布局中正确定位框，我添加了一些额外的类，例如

边距零

、

左下

和

右下

。当图像缩小时，我需要删除这些类，当它们扩展到全尺寸时，我需要将它们带回来

因此，我创建了一个小的

if

语句

var counter = 0;

if(counter = 0) {
    jQuery(".two").toggleClass( "two-menu" );
    jQuery(".four").toggleClass( "four-menu" );
    jQuery(".images").toggleClass( "images-menu" );
    jQuery(".home").toggleClass( "home-menu" );

    jQuery(".four").removeClass( "bottom-left" );
    jQuery(".four").removeClass( "bottom-right" );
    jQuery(".two").removeClass( "margin-zero" );

    var counter = 1;
} else {
    jQuery(".two").toggleClass( "two-menu" );
    jQuery(".four").toggleClass( "four-menu" );
    jQuery(".images").toggleClass( "images-menu" );
    jQuery(".home").toggleClass( "home-menu" );

    jQuery(".four").addClass( "bottom-left" );
    jQuery(".four").addClass( "bottom-right" );
    jQuery(".two").addClass( "margin-zero" );

    var counter = 0;
}

在我看来这应该行得通。然而，在我的JSFIDLE原型中，它不是。这里是链接，因此您可以看到所有代码以及某些框如何脱离页面

您可以尝试：

if(counter == 0) {

---

编辑：您还声明了3次计数器。

也许您是这个意思

var toggle =0;

function toggleIt() { 
  toggle=!toggle;
  $(".two").toggleClass("two-menu",toggle);
  $(".four").toggleClass( "four-menu",toggle);
  $(".images").toggleClass( "images-menu",toggle);
  $(".home").toggleClass( "home-menu",toggle);

  $(".four").toggleClass( "bottom-left",!toggle );
  $(".four").toggleClass( "bottom-right",!toggle );
  $(".two").toggleClass( "margin-zero",!toggle );
}

---

首先，您在

if（counter=0）中赋值而不是比较{

，它应该是一个

=

。虽然这似乎不能很好地解决它。@Loyalar和它创建了一个同名的新变量，因此原始变量从未更改。如何在不重置变量的情况下更改变量？只需分配它：

counter=1；

您不需要重新声明它。