反复进行按钮和文本更改

Question

我在页面上有一个按钮和一些文本，当我单击按钮时，我试图同时更改按钮文本和页面文本，而我试图使用jQuery来做到这一点。 第一次单击该按钮时，它会起作用，但是再次单击时，它不会变回原来的样子。 这是我的代码：

var button = $('.button');
var div = $('.div')
button.on('click', function() {
    if(button.html('Hello World') && div.html('Hello World')) {
        button.html('What\'s Up');
        div.html('What\'s Up');
    }
    else if(button.html('What\'s Up') && div.html('What\'s Up'))  {
        button.html('Hello World');
        div.html('Hello World');
    }
});

Answer 1

您的第一个条件将始终返回true，因为它是在设置div和button的值，而不是检查是否相等。 尝试：

if(button.html() == 'Hello World' && div.html() == 'Hello World') {

使用text()而不是html()可能会更好，因为您实际上并未设置H​​TML

Answer 2

var text1 = 'Hello World', text2 = 'What s\'up ?';

$('button').click(function() {
  if ($(this).text() == text1) {        
    $(this).text(text2);
    $('div').html(text2);
   } else {         
     $(this).text(text1);
     $('div').html(text1);
   }

});