javascript全局变量UNSET
对于我的项目我需要一个可编辑的文本,所以我决定使用一些插件,但我也是新的jQuery,并决定创建我自己的可编辑标签[内联编辑]。javascript全局变量UNSET
这里是我的代码:
当用户当用户离开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
$(".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;
});
元素运作良好,但如果有两个元素editable
第二个也获得第一个值?
请检查下面的例子:
<label class='editable'>userMania1</label>
<label class='editable'>userDirection1</label>
我可以编辑的第一个标签,但是当我点击第二个我得到第一个的值,所以第二个会是<label class='editable'>userMania1</label>
这是不正确。
请注意,我对这项技术有点新,并试图学习我目前的项目,我该如何解决这个问题?
谢谢。由于以下行
nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
您分配值CurrentOBJhtml这是在编辑的第一个正确的方法去做设置
使用全局变量使得难以重用部分代码。在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()
和直接绑定的事件处理程序,如果要素他们已经存在。
多数民众赞成是:
nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+$(this).text();+"' />";
或者你可以在onfocusout函数结束时将CurrentOBJhtml设置为null
避免使用全局变量 但是如果您希望使用它们 - 使用care完全
$(".hoverable").live("blur",function(){
var Hovertext = $.trim($(this).val());
if (Hovertext == null || Hovertext=="")
{
$(this).parent().text(CurrentOBJhtml);
}
else
{
$(this).parent().text(Hovertext);
}
CurrentOBJhtml = "" //<------ NOTE THIS
return false;
});
不工作..... – Red 2011-12-28 10:34:21
我只是解决它:)
我知道这是不是达到这个&它是脏的确切方式。
但对我来说它工作得很好
添加以下的点击功能
if ($(this).children().html() == null)
{
//alert('I am editable');
CurrentOBJhtml = $(this).text();
}
注:请使用Felix的解决方案,这是非常整齐,更好的一个。
那么'CurrentOBJhtml'是全球性的。你应该为你的插件函数创建一个局部变量(如果你已经创建了一个合适的jQuery插件,这可能不是你发布的代码的情况)。或者,您可以使用'.data()':http://api.jquery.com/data/ – 2011-12-28 10:06:00
@FelixKling不,我不知道如何创建一个jQuery插件,有无论如何解决这个问题?谢谢 。 – Red 2011-12-28 10:09:10
对不起,我读过你想要创建自己的插件;)如果你想,看看http://docs.jquery.com/Plugins/Authoring。否则,正如我已经说过的,使用'.data()'来存储每个元素的值而不是全局变量。 – 2011-12-28 10:11:48