jquery:如何设置一些 onmouse 监听器

Question

不确定我做错了什么，但是alert(titleTxt);始终显示other_location。我需要添加两个 onmouse 监听器，但似乎它始终附加到最后一个元素。

function ghostText(name){
    obj = $("input[name='"+name+"']");
    titleTxt = obj.val();
    obj.css('color', '#cccccc');
    obj.mouseover(function() {
        if(obj.val() == titleTxt){
            obj.val(""); 
            obj.css('color', '#333333');
        }
        alert(titleTxt);
    });
    obj.mouseout(function() {
        if(obj.val() == ''){
            obj.val(titleTxt); 
            obj.css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');

Answer 1

您的变量titleText和obj是隐式全局变量。您需要将 var 放在它们前面，这样它们就是局部变量，并且每次调用 ghostText() 函数时可以有不同的值。

您的警报始终显示上次调用 ghostText() 的值，因为 titleText 是一个全局变量，每次 ghostText() 时其值都会更改 被调用。它应该看起来像这样:

function ghostText(name){
    var obj = $("input[name='"+name+"']");
    var titleTxt = obj.val();
    obj.css('color', '#cccccc');
    obj.mouseover(function() {
        if(obj.val() == titleTxt){
            obj.val(""); 
            obj.css('color', '#333333');
        }
        alert(titleTxt);
    });
    obj.mouseout(function() {
        if(obj.val() == ''){
            obj.val(titleTxt); 
            obj.css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');

虽然上面的代码看起来不错，但您可以使用 .hover() 并使用方法链来更多地利用 jQuery:

function ghostText(name){
    var obj = $("input[name='"+name+"']").css('color', '#cccccc');
    var titleTxt = obj.val();
    obj.hover(function() {
        if(obj.val() == titleTxt){
            obj.val("").css('color', '#333333'); 
    }, function() {
        if(obj.val() == ''){
            obj.val(titleTxt).css('color', '#cccccc');
        }
    });
}

ghostText('keyword');
ghostText('other_location');