javascript - 用链接切换文本

Question

当我单击实际上位于同一 p-tag 中的链接时，我想更改 p-tag 中的文本。

示例:

var isMail = 0;
$('.switchto').click(function(evt) {
    evt.preventDefault();
    if(isMail == 0) {
        $(this).parent().html("oder doch lieber einen <a href='#' class='switchto'>Facebook Freund</a>");
        isMail = 1;
    } else {
        $(this).parent().html("oder lieber <a href='#' class='switchto'>E-Mailadresse eingeben</a>");
        isMail = 0;
    }

});

HTML:

<p>oder lieber <a href="#" class="switchto">E-Mailadresse eingeben</a></p>

为什么这不能正常工作？我错过了什么吗？有没有更简单的方法来做到这一点？谢谢!

Answer 1

我会添加一个跨度:

<p><span>oder lieber </span><a href="#" class="switchto">E-Mailadresse eingeben</a></p>

然后做:

$('.switchto').on('click', function(evt) {
    evt.preventDefault();
    $(this).text(function(_,txt) {
        var state = txt == 'Facebook Freund';
        $(this).prev('span').text(state ? 'oder lieber ' : 'oder doch lieber einen ');
        return state ? 'E-Mailadresse eingeben' : 'Facebook Freund';
    });
});

FIDDLE