jQuery if語句徽標出現問題。 沒有回應我的期望

Question

我的網站的基本前提是六個大框，當您單擊其中的任意一個時，它們會縮小為圖形菜單欄。 為主頁按鈕添加了一個額外的圖標。

為了在第一個網格布局中正確放置框，我添加了一些額外的類，例如margin-zero ， bottom-left和bottom-right 。 當圖像縮小時，我需要刪除這些類，並在將它們擴展到完整大小時將它們放回原處。

因此，我創建了一些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;
}

在我看來，這應該可行。 但是，在我的JSFiddle原型中卻沒有。 這是鏈接，因此您可以查看所有代碼以及頁面附近的某些框。

http://jsfiddle.net/NkYhh/

Answer 1

您可以嘗試：

if(counter == 0) {

編輯：同樣，您要聲明計數器3次。

Answer 2

也許你是這個意思？

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