多次更改按钮上的文本并将 div 移动到 JQuery

Question

我目前有一个位于页面中央的方框 div (id = "container")。在那个 div 里面，我有一个显示 "clickMe" 的按钮。我想要的是，当我单击该按钮时，div 移动到屏幕左侧，按钮文本上的文本更改为 "Collapse"，当我再次单击它时（折叠按钮） div returns 回到屏幕中央，按钮文本变为 "Extend".

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

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

我没有发现您似乎正在尝试做的事情有任何问题。

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

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>

多次更改按钮上的文本并将 div 移动到 JQuery

Changing text on a button multiple times and moving a div with JQuery

html

javascript

css

jquery

jquery-animate