javascript全局变量UNSET

时间:2011-12-28 09:59:11

标签: javascript jquery variables

对于我的项目,我需要一个可编辑的文本,所以我决定使用一些插件,但我也是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>,这是不正确的。

请注意,我对这项技术有点新意,并尝试学习目前的项目,我该如何解决这个问题呢?

谢谢。

4 个答案:

答案 0 :(得分:1)

那是由于以下一行

nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+CurrentOBJhtml+"'  />";

您正在为CurrentOBJhtml分配值,在编辑第一个时设置正确的方法是:

nextHtml = "<input style='border:1px solid red;' type='text' class='hoverable' value='"+$(this).text();+"'  />";

或者你可以在onfocusout函数的末尾将CurrentOBJhtml设置为null

答案 1 :(得分:1)

使用全局变量会使重用部分代码变得困难。在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();
        }
    });

}());

DEMO

另请注意,自jQuery 1.7起,您应该使用.on() [docs]而不是.live(),并将事件处理程序直接绑定到元素(如果它们已经存在)。

答案 2 :(得分:0)

避免使用全局变量 但如果你决定使用它们 - 请小心使用

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

答案 3 :(得分:0)

我只是解决它:)

我知道这不是实现这个目标的确切方法。它很脏。

但对我来说效果很好

我在点击功能

中添加了以下内容
if ($(this).children().html() == null)
 {
    //alert('I am editable');
    CurrentOBJhtml = $(this).text();
 }

注意:请使用Felix的解决方案,它非常整洁,更好。