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

【问题标题】：Changing text on a button multiple times and moving a div with JQuery多次更改按钮上的文本并使用 JQuery 移动 div
【发布时间】：2017-12-31 11:04:43
【问题描述】：

我目前有一个位于页面中心的盒形 div (id = "container")。在那个 div 里面我有一个按钮，上面写着“clickMe”。我想要的是，当我单击该按钮时，div 移动到屏幕的左侧，按钮文本上的文本更改为“折叠”，当我再次单击它（折叠按钮）时，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 移到左侧，再次单击时将 div 移到中心，我希望能够做到这不止一次。 PS：我尝试在第一个 if 语句中使用延迟，但得到了相同的结果。

【问题讨论】：

为什么要在第 1 阶段为 right 属性设置动画，然后在第 2 阶段为 left 属性设置动画？

标签： javascript jquery html css jquery-animate

【解决方案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>

【讨论】：