глобальная переменная javascript UNSET

Question

Для моего проекта мне нужен редактируемый текст, поэтому я решил использовать некоторые плагины, но я также новичок в jQuery и решил создать свой собственный редактируемый ярлык [inline edit].

Вот мой код:

Когда пользователь щелкает элемент с классом 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>, что неверно.

Пожалуйста, обратите внимание, что я немного новичок в этой технологии и пытаюсь учиться с моим текущим проектом, как я могу решить эту проблему?

Спасибо.

Answer 1

Использование глобальных переменных затрудняет повторное использование части вашего кода.В jQuery вы можете использовать .data() ^{[документы]} , чтобы связать произвольные данные с элементом 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() ^{[документы]} вместо .live() и привязывать обработчики событий непосредственно к элементам, если они уже существуют.

Answer 2

это из-за следующей строки

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();+"'  />";

Или вы можете установить CurrentOBJhtml на ноль в конце функции onfocusout

Answer 3

Я просто решаю это :) 1001 *

Я знаю, что это не точный способ добиться этого, и это грязно.

Но для меня это хорошо работает

Я добавил следующее к функции щелчка

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

ПРИМЕЧАНИЕ: Пожалуйста, используйте решение Феликса, оно очень аккуратное и лучшее.

Answer 4

избегать использования глобальных переменных но если вы решили использовать их - используйте осторожно

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