javascript - jquery 中的重构替换

Question

工作版本http://jsfiddle.net/uxBZN/

只替换 html 输入标记的 type (type="password") 参数中的密码或文本，而不是替换整个 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+ 版本，则最好使用 on 而不是 live。