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这是在编辑的第一个正确的方法去做设置

来源

2011-12-28 Red

那么'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

使用全局变量使得难以重用部分代码。在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()和直接绑定的事件处理程序，如果要素他们已经存在。

来源

2011-12-28 10:20:44

谢谢你解释，但我需要'focusout'事件回来这是一点点更好，当我使用这个我得到一个空白文本区域，我需要该文本区域上的当前值.. – Red 2011-12-28 10:36:20

不知道为什么我有首先点击''，但当然你可以使用任何你想要的，你只需要调整代码;）修正它反正。 – 2011-12-28 10:39:17

现在，当我点击元素它变得空白...没有输入[类型='文本']区域.. – Red 2011-12-28 10:45:00

多数民众赞成是：

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

或者你可以在onfocusout函数结束时将CurrentOBJhtml设置为null

来源

2011-12-28 10:12:48

避免使用全局变量但是如果您希望使用它们 - 使用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; 
});

来源

2011-12-28 10:16:47 alrusdi

不工作..... – Red 2011-12-28 10:34:21

我只是解决它:)

我知道这是不是达到这个&它是脏的确切方式。

但对我来说它工作得很好

添加以下的点击功能

if ($(this).children().html() == null) 
{ 
    //alert('I am editable'); 
    CurrentOBJhtml = $(this).text(); 
}

注：请使用Felix的解决方案，这是非常整齐，更好的一个。

来源

2011-12-28 11:05:32 Red

javascript全局变量UNSET

回答

相关问题