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

I have many buttons that have same class but different id on each. The following html button is added beside each $data element.

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

Now I want to change individual button's text based on if it is clicked. i.e. 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. i.e. 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.

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

4 个解决方案

#1

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()==“推广到主页”永远不会真实但是$(“#”+ id).html()==“推广到主页”将是

#2

In this case you should use text() instead of html() as it has simple text. Take care of the spaces. Use $.trim before comparing the values. Try with -

在这种情况下,你应该使用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);
});

FIDDLE

#3

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)
    });
})

#4

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');        
    }
});

#1