1

I want to change a text within a p-tag when I click a link that is actually within the same p-tag.

Example: 

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>

Why is this not working correctly? Am I missing something? Is there an easier way to do this? Thanks!

4

2 回答 2

2

我会添加一个跨度：

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

小提琴

于 2013-07-24T16:54:15.587 回答
0

在替换其父元素的 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

于 2013-07-24T16:52:40.620 回答