Переключить текст со ссылкой

Question

Я хочу изменить текст в p-теге, когда я нажимаю ссылку, которая фактически находится в одном и том же p-теге.

Пример:

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

Вы заменяете содержимое, включая исходный элемент, при замене 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

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

FIDDLE