对于我的项目,我需要一个可编辑的文本,所以我决定使用一些插件,但我也是 jQuery 新手,并决定创建我自己的可编辑标签 [内联编辑]。
这是我的代码:
当用户单击类 editable
的元素时
$(".editable").live("click",function(){
//alert($(this).text());
//CurrentOBJhtml = $(this).text();
if (typeof CurrentOBJhtml == 'undefined' || CurrentOBJhtml =="" )
{
CurrentOBJhtml = $(this).text();
}
nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
var c = nextHtml;
$(this).html(c);
$(this).children().focus();//$(this).focus();
return false;
});
当用户离开hoverable
时
$(".hoverable").live("focusout",function(){
var Hovertext = $.trim($(this).val());
if (Hovertext == null || Hovertext=="")
{
$(this).parent().text(CurrentOBJhtml);
}
else
{
$(this).parent().text(Hovertext);
}
return false;
});
问题是当我开始编辑第一个元素时它运行良好,但是如果有两个元素具有类 editable
第二个也获得第一个的值?
请检查以下示例:
<label class='editable'>userMania1</label>
<label class='editable'>userDirection1</label>
我可以编辑第一个标签,但是当我单击第二个标签时,我将获取第一个标签的值,因此第二个标签将是 <label class='editable'>userMania1</label>
这是不正确的。
请注意,我对这项技术有点陌生,并试图通过我当前的项目学习,我该如何解决这个问题?
谢谢。
最佳答案
使用全局变量会使重用部分代码变得困难。在 jQuery 中,您可以使用 .data()
[docs]将任意数据与 DOM 元素关联。
这是代码的清理版本:
(function() {
var $input = $('<input style="border:1px solid red;" type="text" />');
$input.focusout(function(event) {
event.stopPropagation();
event.preventDefault();
var value = $.trim($(this).val()) || $(this).parent().data('orig_text');
$(this).parent().text(value);
});
$(".editable").live("click",function(event){
if (event.target === this) {
event.stopPropagation();
event.preventDefault();
var text = $(this).text();
$(this)
.data('orig_text', text)
.empty()
.append($input.clone(true).val(text))
.children('input').focus();
}
});
}());
另请注意,从 jQuery 1.7 开始,您应该使用 .on()
[docs]而不是 .live()
并将事件处理程序直接绑定(bind)到元素(如果它们已经存在)。
关于javascript 全局变量 UNSET,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8654357/