Question

我的页面上有一个按钮，用于启动动画并停止播放。最重要的是，当您单击按钮时，按钮内的文本会发生变化。因此，当您单击按钮时，它会启动动画并更改文本，但是当您再次单击它时，它会停止动画并且不会更改文本。我想知道我会怎么做。这是我的代码： http://pastebin.com/aB83eKxL

Answer 1

更改文本的代码在哪里？我没有在你的例子中看到它。您需要执行以下操作：

    $('input#lightswitch').on('change', function() {
      if($('#ls').html() != 'RAINBOW!') $('#ls').html('RAINBOW!');
      else $('#ls').html('Normal button text');
    });

Answer 2

您可以使用单行三元表达式。

替换： $('#ls').html('RAINBOW!')

使用： $('#ls').html(($('#ls').html() == 'Rainbow Switch' ? 'RAINBOW!' : 'Rainbow Switch'))

Answer 3

将您的代码更改为：

  $(function() {
    var initialText = 'RAINBOW!';
    $('input#lightswitch').on('change', function() {
      var nextText =  $('#ls').html();
      $('#ls').html(initialText);
      initialText = nextText;
    });

Answer 4

你的例子有太多的代码要经历这一切（你应该为这样的东西发布一个更简单的例子），但这是你需要的一种方法：

＆＃13;

<canvas id="product-image" width="400px" height="400px"></canvas>

＆＃13;

$('#testbtn').click(function(){
    var $this =  $(this);
    if($this.val()=='Click Me') $this.val('Click Me Again')
    else $this.val('Click Me')
});

＆＃13;

我有一个按钮，可以在单击时更改其中的文本，但不会更改回来

4 个答案: