Refactor заменить в JQuery

Question

рабочую версию http://jsfiddle.net/uxBZN/

было бы лучше просто заменить пароль или текст в пределах типа (тип = «пароль») параметр HTML ввода тега, вместо целого типа тега HTML ввода, так как см. ниже?

$("#unhide_typing").live("click", function(){ 
    var security_answer = $("#security_answer").val(); 
    var hnumber = $("#hnumber").val(); 

    if ($('#unhide_typing').is(':checked')) { 
     $("#security_answer").replaceWith('<input type="text" name="answer" value="'+security_answer+'" id="security_answer">'); 
     $("#hnumber").replaceWith('<input type="text" name="hnumber" value="'+hnumber+'" id="hnumber">'); 
    } else { 
     $("#security_answer").replaceWith('<input type="password" name="answer" value="'+security_answer+'" id="security_answer">'); 
     $("#hnumber").replaceWith('<input type="password" name="hnumber" value="'+hnumber+'" id="hnumber">'); 
    } 
}); 

Это должно работать с IE 7/8, и я хочу сохранить введенный текст.

Answer 1

Да, вы можете это сделать.

$("#unhide_typing").live("click", function(){ 
    var security_answer = $("#security_answer").val(); 
    var hnumber = $("#hnumber").val(); 
    var type = $(this).is(':checked') ? "text" : "password"; 

    $("#security_answer").replaceWith('<input type="' + type + '" name="answer" value="'+security_answer+'" id="security_answer" />'); 
    $("#hnumber").replaceWith('<input type="' + type + '" name="hnumber" value="'+hnumber+'" id="hnumber" />'); 
}); 

Примечание: Внутри обработчика вы можете использовать this для обозначения #unhide_typing, а также, если вы используете JQuery версии 1.7+, то это preferrable использовать on вместо live.

Answer 2

Замена некоторых свойств элементов HTML с помощью jQuery может быть сложной в более старых версиях. Я рекомендую вам оставаться с функцией .prop() и не заменять элементы DOM.

Таким образом, ваш код должен быть таким:

$("#unhide_typing").live("click", function(){ 

    var security_answer = $("#security_answer").val(); 
    var hnumber = $("#hnumber").val(); 

    if ($('#unhide_typing').is(':checked')) { 
     $('#security_answer').prop('type', 'text'); 
     $('#hnumber').prop('type', 'text'); 
    } else { 
     $('#security_answer').prop('type', 'password'); 
     $('#hnumber').prop('type', 'password'); 
    } 
});​ 

Answer 3

Да, это лучше просто заменить тип по ряду причин:

1. Повышение производительности (элемент не получает удален а затем новый, созданный/вставленный в DOM)
2. Не нарушает встроенный механизм отмены работы браузера (возможно, не критический для этого прецедента, но, возможно, он находится в других).
3. Любые другие обработчики событий, связанные с первоначальным значением не будут удалены

Просто убедитесь, что вы используете .prop() метод JQuery, а не .attr():

http://jsfiddle.net/uxBZN/2/