Question

我是新来的。我的JQUERY有问题。它不会在第一次点击时工作，但按预期用于每次其他点击。

我这里有4个脚本：

第一个切换div高度在400px和60px之间，第二个切换行高，使文本以div高度移动，第3切换文字，第四个切换背景。

在我的计算机上，它可以在第二次点击时正常工作。第一次点击没有做任何事情。

在小提琴上，您可以看到它在第一次点击时切换文本并发出错误。

$("#map-cover").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 400 : 60},{ duration: 200, queue: false });
    
    }
})());
 $("#map-cover").click((function() {
    var i = 0;
    return function(){
        $(this).animate({lineHeight:(++i % 2) ? 400 : 60},{ duration: 200, queue: false });
        
    }
})()); 
 
$('.background').click(function ()
{
    return $(this).is('.background')
    ?
        $(this).css('background', 'rgba(0,0,0, 0.9)').removeClass('background')
    :
        $(this).css('background', 'rgba(0,0,0, 0.4)').addClass('background')
    ;
});

    
$("#map-cover").on("click", function(){
    if($(this).text()=="OPEN THE MAP")
    {
        $(this).text("CLOSE THE MAP");
    } else {
        $(this).text("OPEN THE MAP");
    }
    $(".ISProductBody").toggle(); 

    return false;
});

.background {
    background: rgba(0,0,0, 0.9);
}
.background-alt {
    background: rgba(0,0,0, 0.4);
   
}

#map-cover {
  width: 100%;
  height: 400px;
  color: white;
  line-height: 400px;
  text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" id="map-cover">OPEN THE MAP</div>

Answer 1

从var i = 1;

开始

JSFiddle Demo

编辑：请参阅Barmar的答案，因为我做得不比他好。：）

Answer 2

您的第一次点击是将height和lineHeight设置为与CSS中相同的值。 i的初始值为0。 ++i的值为1，1 % 2为1，这是真实的，因此首次点击时(++i % 2) ? 400 : 60的值为400

只需更改其中值的顺序，或使用i++代替++i。

$("#map-cover").click((function() {
  var i = 0;
  return function() {
    $(this).animate({
      height: (i++ % 2) ? 400 : 60
    }, {
      duration: 200,
      queue: false
    });

  }
})());
$("#map-cover").click((function() {
  var i = 0;
  return function() {
    $(this).animate({
      lineHeight: (i++ % 2) ? 400 : 60
    }, {
      duration: 200,
      queue: false
    });

  }
})());

$('.background').click(function() {
  return $(this).is('.background') ?
    $(this).css('background', 'rgba(0,0,0, 0.9)').removeClass('background') :
    $(this).css('background', 'rgba(0,0,0, 0.4)').addClass('background');
});


$("#map-cover").on("click", function() {
  if ($(this).text() == "OPEN THE MAP") {
    $(this).text("CLOSE THE MAP");
  } else {
    $(this).text("OPEN THE MAP");
  }
  $(".ISProductBody").toggle();

  return false;
});

.background {
  background: rgba(0, 0, 0, 0.9);
}
.background-alt {
  background: rgba(0, 0, 0, 0.4);
}
#map-cover {
  width: 100%;
  height: 400px;
  color: white;
  line-height: 400px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" id="map-cover">OPEN THE MAP</div>

Answer 3

我简化了您的代码并纠正了一系列问题（主要与可读性和可维护性有关）。

但问题取决于您如何检查(++i % 2 === 0)的值，以便与i进行比较。

但是，当您要检查增量i % 2的值两次时，最好分开增加比较，然后将0的值与var open, i = 0; $("#map-cover").click(function(){ var self = $(this); if(!open) { open = true; self.addClass('background'); self.text("CLOSE THE MAP"); } else { open = false; self.removeClass('background'); self.text("OPEN THE MAP"); } $(this).animate( { 'height': (!(i % 2 === 0) ? 400 : 60), 'line-height': (!(i % 2 === 0) ? 400 : 60) }, { duration: 200, queue: false } ); $(".ISProductBody").toggle(); i++; });进行比较

#map-cover {
  background: rgba(0,0,0, 0.9);
  width: 100%;
  height: 400px;
  color: white;
  line-height: 400px;
  text-align: center;
}
#map-cover.background {
  background: rgba(0,0,0, 0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-cover">OPEN THE MAP</div>

if (checkPlayServices()) {
    // Start IntentService to register this application with GCM.
    Intent intent = new Intent(this, RegisterGCM.class);
    startService(intent);
}

jquery函数在第一次点击时不起作用

3 个答案: