0

我不得不承认，在我自己试验和学习的所有时间里，我通过看到许多 jQuery 脚本纯粹凭直觉想出了这个解决方案。

由于我没有人亲自问这些问题，这就是我来这里寻求帮助和指导的原因。

--

受Wufoo 的计划表格的启发，在填写表格时需要重点突出显示的行，我创建了这个脚本（我不是 jQuery 或 JavaScript 大师，我还在学习和练习）：

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        //When input element has focus
        $('input').focus(function(){
            //Add the class to its corresponding row
            $(this).parent().parent('.row').addClass('focus'),
                //And when it loses focus
                $('input').blur(function(){
                    //Remove the class
                    $(this).parent().parent('.row').removeClass('focus');
                });
        });
});

所以我想知道这个脚本是否有办法以任何方式编写得更好或优化/缩短。如果没有，而且我写的方式没问题，那很好，我想学习的只是尽可能优化代码的方法，仅此而已。

如果您想查看它，我在 Codepen 中创建了一个Demo。

提前致谢。

4

3 回答 3

4

你可以这样做：

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        $('input').focus(function(){
            $(this).closest('.row').addClass('focus'); // Change here                    
        }).blur(function(){ // Change here
           $(this).closest('.row').removeClass('focus'); // Change here
        });
});

甚至更短！

$(function(){
    $("input").on("focus blur", function(){
        $(this).closest(".row").toggleClass("focus");
    });
});

你做错了一件事！！每次您聚焦时，您都会为每个输入绑定一个新的模糊！

于 2013-01-30T20:51:28.123 回答
4

代码看起来不错。我要做的唯一更改是使用closest()而不是链接parent()调用，就好像您更改周围的 DOM 一样，您需要更改您的 jQuery 代码。另外，我会将处理程序移到blur()处理程序之外focus()。试试这个：

$(function() {
    $('input')
        .focus(function() {
            $(this).closest('.row').addClass('focus');
        })
        .blur(function() {
            $(this).closest('.row').removeClass('focus');
        });
});
于 2013-01-30T20:51:41.923 回答
1

我会尝试将我的偶数处理程序和事件绑定分开。这很方便，.on()它实际上将事件绑定到所有当前和未来的.row元素，这与.focus()它仅在绑定发生时将事件绑定在页面上的行上不同。

这样您就不需要将代码包装到$(function(){});其中。您可以将事件绑定放在包含的 .js 文件中，而不是将 jQuery 与标记混合。

此外，使用.closest()而不是，.parent().parent()因为如果您选择稍微更改结构，它不会中断。前提是你.row还在。

var onRowFocus = function(){
    $('.row').removeClass('focus');
    $(this).closest('.row').addClass('focus');
};

$('.row').on('focus', 'input', onRowFocus);

此外，您根本不需要绑定.blur事件。只需focus从所有行中删除该类，然后再将其添加到焦点所在的行中。更少的事件处理程序，更少的代码，更易于维护。

于 2013-01-30T21:20:06.683 回答