javascript - Jquery html() 内部条件检查

Question

这些是我的代码的摘录

<button>Hook It!</button>

和一些 JQuery

$("ul li .tag_detail button").on('click', function() {
    console.log($(this).html());
    if ($(this).html() == 'Hook It!') {
        $(this).html('Unhook!');
    }
    if ($(this).html() == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

现在，正如你所看到的，我想要一个切换效果，即当我单击按钮时，它应该在 Hook It! 之间切换。然后松开!。

问题就出在这里

if($(this).html() == 'Hook It!')

这里，当控制台日志打印 Hook It 时，这种情况永远不会过去!

console.log($(this).html());

Answer 1

问题是第一个如果条件满足则内容更改为Unhook，然后第二个满足，因为内容被第一个条件更改，现在第二个 block 执行更改html返回 Hook

$("ul li .tag_detail button").on('click', function () {
    var text = $(this).text();
    console.log(text);
    if (text == 'Hook It!') {
        $(this).html('Unhook!');
    } else if (text == 'Unhook!') {
        $(this).html('Hook It!');
    }
});

可能是另一个版本

$("ul li .tag_detail button").on('click', function () {
    $(this).text(function(idx, text){
        return text == 'Hook It!' ? 'Unhook!' : 'Hook It!';
    });
});