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

Question

The basic premise of my site is six large boxes that shrink down into a graphical menu bar when you click any of them. An extra icon is added for the home button.

In order to position the boxes correctly in the first grid layout, I included a few extra classes such as margin-zero , bottom-left and bottom-right . I need to remove these classes when the images are shrunk down, and bring them back when they're expanded to full size.

So, I created a little if statement.

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

To me it looks like this should work. However, in my JSFiddle prototype, it doesn't. Here is the link, so you can see all of the code and how certain boxes just off the page.

http://jsfiddle.net/NkYhh/

Answer 1

You may try:

if(counter == 0) {

Edit: also you are declaring counter 3 times.

Answer 2

perhaps you meant this?

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