if / else |在jquery中更改html

Question

$("#button_announcement").click(function(){ 
    $('#button_announcement').html('Hide') ? $(this).html('Show') : $(this).html('Hide');
});

我的页面上有一个按钮，显示/隐藏我的公告。我想在点击它之后更改按钮html，但这段代码只需更改一次＆＃39;隐藏＆＃39;显示＆＃39;它不想从一个节目变为隐藏......我做错了什么？

Answer 1

改变这个：

$('#button_announcement').html('Hide') ? ...

到此：

$('#button_announcement').html() === 'Hide' ? ...

前者只是分配＆＃39;隐藏＆＃39;作为HTML始终，但后者检查#button_announcement的HTML是否为＆＃39;隐藏＆＃39;。

Answer 2

问题是因为你在条件中使用了html()的setter。您需要使用getter并检查值。请注意，在这里使用text()方法会更好：

$("#button_announcement").click(function(){ 
    $(this).text() == 'Hide' ? $(this).text('Show') : $(this).text('Hide');
});

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

或者，您可以为text()提供一个函数，该函数根据当前设置更新值。这避免了对显式getter的需要：

$("#button_announcement").click(function() {
  $(this).text(function(i, t) {
    return t == 'Hide' ? 'Show' : 'Hide';
  })
});

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