Javascript 在jquery中重构替换

工作版本

如果只替换html输入标记的type（type=“password”）参数中的password或text，而不是整个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">');
    }
});

$（“取消隐藏键入”）.live（“单击”，函数（）{
var security_answer=$（“#security_answer”）.val（）；
var hnumber=$（“#hnumber”）.val（）；
if（$（'#unhide_typing'）。是（':checked'））{
$（“#安全回答”）。替换为（“”）；
$（“#hnumber”）。替换为（“”）；
}否则{
$（“#安全回答”）。替换为（“”）；
$（“#hnumber”）。替换为（“”）；
}
});

这需要使用IE 7/8，我希望保留当前输入的文本。

是的，您可以这样做

$("#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" />');
});

$（“取消隐藏键入”）.live（“单击”，函数（）{
var security_answer=$（“#security_answer”）.val（）；
var hnumber=$（“#hnumber”）.val（）；
变量类型=$（this）.is（':checked'）？“text”：“password”；
$（“#安全回答”）。替换为（“”）；
$（“#hnumber”）。替换为（“”）；
});

---

注意：在处理程序中，您可以使用

this

来引用

#unhide(取消隐藏)键入的内容

，并且如果您使用的是jQuery 1.7+版本，则最好在

上使用
而不是
live
，在旧版本中使用jQuery替换HTML元素的某些属性可能会比较棘手。我建议您继续使用
.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');
    }
});​

是的，出于以下几个原因，最好只替换该类型：

更好的性能（一个元素不会被删除，然后在DOM中创建/插入一个新的元素）
不会破坏浏览器内置的撤销机制（对于本用例可能不重要，但在其他用例中可能很重要）
绑定到原始输入的任何其他事件处理程序都不会被删除
只需确保使用jQuery的
.prop（）
方法，而不是
.attr（）
：

在我看来，您是在询问是否可以更改现有
input
元素的
type
属性，而不是创建新元素。你是说这个意思吗？你接受的答案不会改变现有的元素，而是一种替代的方式，你已经做了什么。现在，完全替换元素对于浏览器兼容性来说可能是必要的，但它并没有实现任何不同……请记住，在客户端，您不是使用HTML，而是使用DOM元素。jQuery只是欺骗您，使您认为您正在使用HTML。