多次更改按钮上的文本并使用JQuery移动div

Question

我目前有一个位于页面中心的盒形div（id =“container”）。在div里面我有一个按钮，上面写着“clickMe”。我想要的是，当我单击该按钮时，div移动到屏幕的左侧，按钮文本上的文本变为“Collapse”，当我再次单击它（折叠按钮）时，div返回到屏幕中心和按钮文本更改为“扩展”。

为此，我有以下三个文件：

index.php
menu.php
move.js

menu.php

//...........................
<button id="mover" type="button" >ClickMe</button>
<script type="text/javascript" src="js/move.js"></script>
//........................

move.js

var collapsed = true; //flag

//jQuery button listener
$("#mover").click(function() {


  if (collapsed) {

    console.log("phase1");

    //Moves div to the left of the page
    $("#container").animate({
      right: '25%'
    }, "slow");

    //Change the text on the button to "Collapse" (doesn't work)
    document.getElementById("mover").innnerHTML = "Collapse";
    collapsed = false;
  } else {

    console.log("phase2");

    //Returns the div to the center of the page
    $("#container").animate({
      left: '0%'
    }, "slow");

    //Change the text on the button to "Extend" (doesn't work)
    document.getElementById("mover").innnerHTML = "Extend";
    collapsed = true;

  }
});

的index.php

<div class="bottom">
    <?php include ("menu.php"); ?>          
</div>

当点击按钮一次时，div会向左移动，然后移动到中心。按钮上的文本仍为“ClickMe”（不会更改），如果再次单击该按钮，则div将不会移动。

这是我第一次点击按钮时在控制台上打印的内容：

VM1608 move.js:7                phase1
VM1612 move.js:14               phase2
VM1616 move.js:7                phase1
VM1620 move.js:14               phase2
VM1624 move.js:7                phase1
VM1628 move.js:14               phase2
move.js:7                       phase1

（当我再次单击该按钮时，它会打印相同的9个输出，但div不会移动）

回顾一下，我的代码有3个问题：更改按钮上的文本，单击按钮时将div移动到左侧，再次单击按钮时移动到中心，我希望能够执行此操作一旦。 PS：我尝试在第一个if语句中使用延迟但是得到了相同的结果。

Answer 1

我认为你做的似乎没有任何问题。

这也使用complete中的jQuery animate回调来更改按钮文本。

var collapsed = false;

$('#mover').on('click', function() {

  if (collapsed) {

    $("#move-me").animate({
      left: 0
    }, "slow", function() {
    
    	$('#mover').html('Original text');
    });

    collapsed = false;

  } else {

    $("#move-me").animate({
      left: '25%'
    }, "slow", function() {
    
    	$('#mover').html('Changed text');
    });

    collapsed = true;
  }
});

#move-me {
  height: 200px;
  width: 200px;
  left: 0;
  background-color: grey;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="mover">
  Original text
</button>

<div id="move-me">

</div>