jquery - 单击时更改按钮的文本仅在第二次单击时起作用

Question

我有许多按钮,每个按钮具有相同的类但不同的ID.在每个$ 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>

现在我想基于单击按钮来更改单个按钮的文本.即如果单击一个按钮并且文本"提升到主页",则其文本应更改为"从主页中删除",反之亦然.我使用以下jquery代码来执行此操作.

$('.frontpage').on('click', function() {
    var id = this.id;
    $("#"+id).html($("#"+id).html() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage");
});

下面这段代码工作,但只在第二次点击.即当我点击促销到主页按钮时,它的文本不会改变,但如果我再次单击它,则文本会改变.我究竟做错了什么？请帮忙.

Answer 1

当您从PHP回显时,您可能会添加额外的间距

尝试

<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>

注意回声后删除的空格.这意味着$("#"+id).html() == "Promote to homepage"将永远永远不过真正$("#"+id).html() == "Promote to homepage "将

Answer 2

在这种情况下,您应该使用text()而不是html()简单的文本.照顾空间.$.trim在比较值之前使用.尝试 -

$('.frontpage').on('click', function() {
    var $this = $(this);
    var text = ($.trim($this.text()) == "Promote to homepage") ? "Remove from homepage" : "Promote to homepage";
    $this.text(text);
});

小提琴

Answer 3

将所有功能包裹在dom ready事件中.

$(function () {
    $('.frontpage').on('click', function () {
        var curTxt = $(this).text() == "Promote to homepage" ? "Remove from homepage" : "Promote to homepage";
        $(this).text(curTxt)
    });
})