Jquery - текст кнопки изменения на клике работает только при втором щелчке

У меня есть много кнопок, которые имеют одинаковый класс, но разные идентификаторы для каждого. Рядом с каждым элементом данных добавляется следующая кнопка 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");
});

Теперь этот код работает, но только при втором щелчке. то есть, когда я нажимаю кнопку продвижения на домашнюю страницу, текст не изменится, но если я снова нажму на нее, текст изменится. Что я делаю не так? Пожалуйста, помогите.

Ответ 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 " будет

Ответ 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);
});

FIDDLE

Ответ 3

Оберните все свои функции в событии dom.

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

Ответ 4

Это должно сделать трюк для вас.

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