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

Answer 2

在替换其父级html时，您将覆盖包含原始元素的内容，因此它应该只工作一次。请尝试使用.on()：

var isMail = 0;
$('body').on('click','.switchto',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;
    }
});

您也可以使用这个较短的版本：

var isMail = 0;
var part1 = ['oder doch lieber einen','oder lieber'];
var part2 = ['Facebook Freund','E-Mailadresse eingeben'];
$('body').on('click','.switchto',function(evt) {
    evt.preventDefault();
        $(this).parent().html(part1[isMail%2]+ 
            " <a href='#' class='switchto'>"+part2[isMail%2] +"</a>");
    isMail++;
});

JSBin Demo

用链接切换文本

2 个答案: