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

回答

相關問題