Jquery：点击时在输入和文本之间切换

我需要在点击时在输入和文本之间切换。类似于实时编辑

我写了这段代码，但不起作用。

HTML:

<span class="editInput">Change the value on click</span>
<button>Click me</button>

var editmode = false;

$('button').on('click',function(){
    if(editmode){    
        $('.editInput').replaceWith(function(){
           return '<span class='+this.className+'>'+this.value+'</span>';
           editmode = false;
        })
    }else {
        $('.editInput').replaceWith(function(){
           return '<input type="text" value='+this.text+' class='+this.className+'/>';
           editmode = true;
        })    
    }

})

单击更改值
点击我

JS:

<span class="editInput">Change the value on click</span>
<button>Click me</button>

var editmode = false;

$('button').on('click',function(){
    if(editmode){    
        $('.editInput').replaceWith(function(){
           return '<span class='+this.className+'>'+this.value+'</span>';
           editmode = false;
        })
    }else {
        $('.editInput').replaceWith(function(){
           return '<input type="text" value='+this.text+' class='+this.className+'/>';
           editmode = true;
        })    
    }

})

var editmode=false；
$（'button'）。在（'click'，function（）上{
如果（编辑模式）{
$（'.editInput'）.replaceWith（函数（）{
返回“”+此.value+“”；
editmode=false；
})
}否则{
$（'.editInput'）.replaceWith（函数（）{
返回“”；
editmode=true；
})    
}
})

---

有人能帮我吗？

首先，

this.text

应该是

this.innerText

或

$（this.text（）

）

其次，您需要在

标记中的

值

属性周围加引号，否则它无法处理值中的多个单词。最好使用jQuery元素构造函数的对象形式，这样值中的引号也不会引起问题

第三，对

editmode

的赋值需要在

replaceWith

函数之外。它位于

return

语句之后，因此它永远不会被执行

最终结果：

var editmode=false

$('button').on('click', function () {
    if (editmode) {
        $('.editInput').replaceWith(function () {
            return $("<span>", {
                "class": this.className,
                text: this.value
            });
        });
        editmode = false;
    } else {
        $('.editInput').replaceWith(function () {
            return $("<input>", {
                value: this.innerText,
                    "class": this.className
            });
        });
        editmode = true;
    }

});

$（'button'）。在（'click'，函数（）{
如果（编辑模式）{
$（'.editInput'）.replaceWith（函数（）{
返回$（“”）{
“class”：this.className，
text:this.value
});
});
editmode=false；
}否则{
$（'.editInput'）.replaceWith（函数（）{
返回$（“”）{
值：this.innerText，
“class”：this.className
});
});
editmode=true；
}
});

看看这个。这不是很优雅，但我认为这是一个比你所做的更快、更干净的解决方案。如果你还有任何问题，请告诉我

<div>
    <input/>
    <span>test</span>
</div>
<button>Update</button>

span {
    display:none;
}

$('button').on('click',function(){
    if($("input").is(":visible")) {  
        $("input").hide();
        $("span").text(
            $("input").val()
        ).show();
        $("button").text("Edit");
    } else {
        $("span").hide();
        $("input").text(
            $("span").val()
        ).show();
        $("button").text("Update");
    }
});

测试
更新
跨度{
显示：无；
}
$（'button'）。在（'click'，function（）上{
如果（$（“输入”）为（“：可见”）{
$（“输入”）.hide（）；
$（“span”）.text(
$（“输入”）.val（）
).show（）；
$（“按钮”）.text（“编辑”）；
}否则{
$（“span”）.hide（）；
$（“输入”）.text(
$（“span”）.val（）
).show（）；
$（“按钮”）.text（“更新”）；
}
});

与其替换它们，不如将两者都放在DOM中，只隐藏其中一个。如果你的应用程序可以是HTML5，你可以使用contenteditable属性：Thank@joshboley！它起作用了！只有一件事，它需要先显示跨度，然后单击显示输入。我只是将输入隐藏在css中，并在输入中写入相同的值。是的，这应该可以正常工作。很高兴我能帮忙！