如果声明徽标有jQuery的问题。没有回应我的预期

时间:2013-12-17 21:04:38

标签: jquery css if-statement

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

为了在第一个网格布局中正确定位框,我添加了一些额外的类,例如margin-zerobottom-leftbottom-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/

2 个答案:

答案 0 :(得分:1)

您可以尝试:

if(counter == 0) {

编辑:你也宣布反击3次。

答案 1 :(得分:0)

也许你的意思是这个?

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