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');

Answer 2

由于您使用的是jQuery，因此可以使用以下示例绑定mouseover和mouseout事件：

修改：更新了JavaScript以获得更好的“ghosttext”

HTML

<input name="keyword" value="foo"/>
<input name="other_location" value="bar"/>

CSS

input {
    color:#cccccc;
}

的JavaScript

$('input[name="keyword"], input[name="other_location"]').on('mouseover', function() {
    if (this.defaultValue == this.value) {
        $(this).css('color', '#333333');
    }
}).on('mouseout', function() {
    $(this).css('color', '#cccccc');

    if (this.value == '') {
        this.value = this.defaultValue;
    } else if (this.defaultValue != this.value) {
        $(this).css('color', '#333333');
    }
}).on('click', function() {
    if (this.defaultValue == this.value) {
        this.value = '';
    }
});

如this fiddle所示。请注意，此示例需要jQuery 1.7或更高版本，因为我使用了较新的事件绑定方法.on()，但使用较旧的.mouseover()和.mouseout()方法完全可以。

Answer 3

问题是titleText 是全局属性，更改是“共享”。

帖子中的代码基本上是这样做的：

// ghostText('keyword')
window.titleTxt = obj.val()       // 'keyword'
// ghostText('other_location')
window.titleTxt = obj.val()       // 'other_location'
// later in a callback
alert(window.titleTxt)            // 'other_location'

（请注意，只有一个名为window.titleTxt的属性。）

而是使用本地变量：

var titleTxt = obj.val()

函数作用域中的var关键字注释titleTxt是一个局部变量：由于词法范围，该变量随后将在回调中被关闭。见What is the purpose of the var keyword and when to use it (or omit it)?。（注意，在这种情况下，每个函数调用都有自己的 titleTxt变量。）

快乐的编码。

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

3 个答案:

HTML

CSS

的JavaScript