Jquery：点击时在输入和文本之间切换 [英] Jquery: Toggle between input and text on click

问题描述

我需要在点击时在输入和文字之间切换。类似live edit。

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



HTML ：

 < span class =editInput>更改点击时的值< / span> 
<按钮>点击我< /按钮> 
  

JS：

  var editmode = false; （'click'，function（）{
 if（editmode）{
 $（'。editInput'）。replaceWith（function（ ）{
 return'< span class ='+ this.className +'>'+ this.value +'< / span>'; 
 editmode = false; 
}）
 $ else {
 $（'。editInput'）。replaceWith（function（）{
 return'< input type =textvalue ='+ this.text +'class ='+ this .className +'/>'; 
 editmode = true; 
}）
} 
 
}）
  pre> 
 
 
有人可以帮助我吗？ 
解决方案
 a href =http://jsfiddle.net/4c8Xm/ =nofollow noreferrer>小提琴。这不是很优雅，但我认为这是一个比你所做的更快，更清洁的解决方案。如果您有任何疑问，请告知我们。
 < div> 
< input /> 
< span>测试< / span> 
< / div> 
<按钮>更新< /按钮> 
 
 span {
 display：none; $（$'$'$'$'$'$'$'$'$'$'$''''）。 ）{
 $（input）。hide（）; 
 $（span）。text（
 $（input）。val（）
）。 （）; $ b $（button）。text input）。text（
 $（span）。val（）
）.show（）; 
 $（button）。text（Update）; 
} 
}）; 
  
 
I need to toggle between input and text on click. Something like live edit.


I wrote this code, but it doesn't work.



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

})
Can someone help me?
解决方案
Check out this Fiddle.  It's not very elegant, but I think it's a quick, cleaner solution than what you were doing.  Let me know if you have any more questions.
<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");
    }
});


                        
这篇关于Jquery：点击时在输入和文本之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！