jQuery的：输入和文字上点击之间进行切换(Jquery: Toggle between inpu

我需要点击输入和文字之间切换。 像活的编辑。

我写了这个代码，但它不工作。

HTML：

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

JS：

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

})

有人能帮我吗？

Answer 1:

看看这个小提琴 。 这是不是很优雅，但我觉得它比你在做什么快速，清晰的解决方案。 让我知道如果你有任何问题。

<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");
    }
});

Answer 2:

首先， this.text应this.innerText或$(this).text()

其次，你需要周围的引号value属性中<input>标签，否则它不会与价值多个单词工作。 这将是更好的使用jQuery的元素构造的物体形式，使价值的报价不会导致一个问题，无论是。

第三，分配给editmode需要被外界replaceWith功能。 这是后return语句，所以它永远不会被执行。

最后结果：

是编辑模式= 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;
    }

});

小提琴

文章来源: Jquery: Toggle between input and text on click