Question

我无法找到这个问题的好答案。我正试图用JQuery更好地处理一些更漂亮的外观/表演形式元素。这是我到目前为止使用的代码：


$(document).ready(function() {
        $('.input').addClass('inputOut clear'); // Grey out text initially, default bg

        $('.input').each(function() { // Fill in form fields with labels
            var text = getAttr($(this));
            $(this).attr("value", text);
            $(this).hasfocus = false;
        });

        $('.input').mouseover(function() {
            if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if($(this).attr("value") == text) $(this).addClass('inputOver clear');
                else $(this).addClass('inputOver filled');
            }
        });

        $('.input').mouseout(function() {
            if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if(($(this).attr("value") == "") || ($(this).attr("value") == text)) $(this).addClass('inputOut clear');
                else $(this).addClass('inputOut filled');
            }
        });

        $('.input').focus(function() {
            $(this).hasfocus = true;
            $(this).removeClass();
            $(this).addClass('inputActive');
            var text = getAttr($(this));
            if($(this).attr("value") == text) {
                $(this).attr("value", "");
            }
        });

        $('.input').blur(function() {
            $(this).hasfocus = false;
            var text = getAttr($(this));
            $(this).removeClass();
            if($(this).attr("value") == "") {
                $(this).attr("value", text);
                $(this).addClass('inputOut clear');
            }
            else if(($(this).attr("value") != "") && ($(this).attr("value") != text)) {
                $(this).addClass('inputOut filled');
            }
        });

        // TEST SPANS
        $("#spans span.off").fadeIn(0);

    });

    function getAttr(element) {
        var text = element.attr("id");
        text = text.replace(/-/g," ");
        return text;
    }

除了一件事，一切都正如我所愿。 mouseover / mouseout函数在具有焦点的元素上运行。主要是HTML / PHP，我的Javascript技能绝对是一项正在进行的工作，所以要好。我认为可以工作的是添加一个isFocused属性（你可以看到我在那里尝试过的东西），但是到目前为止我还没有尝试过它。

非常感谢任何帮助。

Answer 1

我想你想要第7行：

$(this).isFocused == "false";

是

$(this).isFocused = "false";

Answer 2

我认为以下内容可能会在这个例子中评估相同，但不应该：

if ($(this).hasfocus == "true") return;

是：

if ($(this).hasfocus == true) return;

Answer 3

你可能想重构一下。

创建命名函数，或[更好]创建一个对象（如果你没有很多js，则全局可以正常）并将你的函数放在该对象中，以便它们具有名称。

MyAwesomeGlobalSomething={};
MyAwesomeGlobalSomething.mOverFunc=function(){
  //the stuff You do
       if ($(this).hasfocus == true) return;
            else {
                var text = getAttr($(this));
                $(this).removeClass();
                if($(this).attr("value") == text) $(this).addClass('inputOver clear');
                else $(this).addClass('inputOver filled');
            }
}
//and more functions here

您现在可以绑定

 $('.input').mouseover(MyAwesomeGlobalSomething.mOverFunc);

现在

$('.input').focus(function(){
  $(this).unbind('mouseover');
//and more functions here
});

解决了您的问题并

$('.input').blur(function(){
  $(this).mouseover(MyAwesomeGlobalSomething.mOverFunc);
//and more functions here
});

返回函数绑定

停止功能执行是输入元素有焦点吗？

3 个答案: