javascript - jQuery if-else 工作 50%

Question

下面的代码在 document.ready 函数中。 if-else 语句只工作了一半...第一部分 (if) 工作正常，我在 powerClicked 后发出警报，告诉我它是否将 powerClicked 设置为 1，它是。 else if 什么都不做......有人看到我的错误吗？我不知道 jQuery 是否有问题，整个 HTML 都在 ReactJS VDOM 上呈现。

var powerClicked = 0;
    
    if(powerClicked == 0) {
        $('#Power').click(function() {
            powerClicked = 1;
           $('#Power').animate({
              backgroundColor: 'rgba(255,0,0,1)' 
           }, 1500);
            //fading in text
        $('#boxText').delay(2000).fadeIn(500).text('Listening');
        
        });
        
    } else if(powerClicked == 1) {
        $('#Power').click(function() {
            
           $('#Power').animate({
              backgroundColor: 'rgba(255,255,255,1)' 
           }, 1500); 
           //fading out text
            $('boxText').fadeOut(500);
            powerClicked = 0;
        });   
    }

Answer 1

当您的代码运行时，if 语句会运行并创建函数来处理 $('#Power') 元素的点击。

只要单击 $('#Power') 元素，就会触发其中定义的函数。 if-else 将永远不会再次执行。您需要在点击处理程序中移动 if-else 逻辑。这样的事情应该有效:

    var powerClicked = false;
    $('#Power').click(function() {
       powerClicked = !powerClicked;

       if (powerClicked) {
         $('#Power').animate({
            backgroundColor: 'rgba(255,0,0,1)' 
         }, 1500);
       } else {
         $('#Power').animate({
            backgroundColor: 'rgba(255,255,255,1)' 
         }, 1500); 

       }

       //fading in text
       $('#boxText').delay(2000).fadeIn(500).text('Listening');        
    });