[英]jquery - change button's text on click works only on second click
I have many buttons that have same class but different id on each. 我有许多按钮,每个按钮具有相同的类但不同的ID。 The following html button is added beside each $data element.
在每个$ data元素旁边添加以下html按钮。
<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?> </button>
Now I want to change individual button's text based on if it is clicked. 现在我想基于单击按钮来更改单个按钮的文本。 ie if a button is clicked and it has text "Promote to homepage", it's text should change to "Remove from homepage" and vice versa.
即如果单击一个按钮并且文本“提升到主页”,则其文本应更改为“从主页中删除”,反之亦然。 I used the following jquery code to do so.
我使用以下jquery代码来执行此操作。
$('.frontpage').on('click', function() {
var id = this.id;
$("#"+id).html($("#"+id).html() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage");
});
Now this code works but only on second click . 现在这段代码可以工作但只能在第二次点击 ie when I click a promote to homepage button, it's text won't change but if I click it again, the text changes.
即当我点击促销到主页按钮时,它的文本不会改变,但如果我再次单击它,则文本会改变。 What am I doing wrong?
我究竟做错了什么? Please help.
请帮忙。
Looks like you might be adding in extra spacing when you echo out from PHP 当您从PHP回显时,您可能会添加额外的间距
Try 尝试
<button name="toHomepageButton" id = "<?php echo $data->id ?>" class="frontpage"><?php if ($data->isChecked == 1) echo "Remove from homepage"; else echo "Promote to homepage" ; ?></button>
Notice the removed space after the echo. 注意回声后删除的空格。 This means that
$("#"+id).html() == "Promote to homepage"
Will never never true however $("#"+id).html() == "Promote to homepage "
Would be 这意味着
$("#"+id).html() == "Promote to homepage"
永远不会真实但是$("#"+id).html() == "Promote to homepage "
将是
In this case you should use text()
instead of html()
as it has simple text. 在这种情况下,你应该使用
text()
而不是html()
因为它有简单的文本。 Take care of the spaces. 照顾空间。 Use
$.trim
before comparing the values. 在比较值之前使用
$.trim
。 Try with - 尝试 -
$('.frontpage').on('click', function() {
var $this = $(this);
var text = ($.trim($this.text()) == "Promote to homepage") ? "Remove from homepage" : "Promote to homepage";
$this.text(text);
});
Wrap all your functions on dom ready event. 将所有功能包裹在dom ready事件中。
$(function () {
$('.frontpage').on('click', function () {
var curTxt = $(this).text() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage";
$(this).text(curTxt)
});
})
This should do the trick for you. 这应该为你做的伎俩。
$('.frontpage').on('click', function() {
if ($.trim($(this).text()) === 'Promote to homepage') {
$(this).text('Remove from homepage');
}
else if ($.trim($(this).text()) === 'Remove from homepage') {
$(this).text('Promote to homepage');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.