Question

$(textBox).focus( function() {
    $(spans).css({"background-position": "0 100%"});
});
$(textBox).blur( function() {
    $(spans).css({"background-position": "0 0"});
});

这已经很短了，但要么我太偏执了，要么我们可以把它编码得更短

$(textBox).bind('focus blur', function() { *do toggle here* });

或其他。

非常感谢任何帮助。 =）

Answer 1

试试这个：

$( textBox ).focus( function(){...} ).blur( function() {...} );

是的，您也可以使用指定的bind()函数。

我发现我的版本更具可读性。

祝你好运！

Answer 2

你也可以试试这个：

$(textBox).bind('focus blur', function(e) {
    var bg = (e.type=='blur') ? '0 0' : '0 100%';
    $(spans).css({"background-position": bg});

});

Answer 3

我认为优化和代码清晰度之间存在界限。没有任何进一步的证据，我认为，就优化而言，你不会看到任何重大改进。

将这两者分开可以实现非常快速简便的扫描......没有逻辑可以通过。它只是“当这发生时，然后这样做”。很简单，如果有的话，你很可能会失败。

编辑：如果您在评论中提到要切换课程，则可以

$(textBox).bind('focus blur', function() { 
var currentClass = $(this).attr('class');
var newClass = currentClass == 'gotFocus' ? 'noFocus' : 'gotFocus';
$(this).removeClass(currentClass).addClass(newClass); });

Answer 4

如果要对两个事件使用相同的功能，则需要使用一种方法来更改可用于双向转换的效果。类似的东西：

$(textBox).bind('focus blur', function() { $(spans).toggleClass('over'); });

如果有很多元素需要改变效果，你应该考虑使用CSS的级联效果，而不是让jQuery改变所有元素的类，即改变单个父元素的类，并且具有针对您想要影响的所有子元素的样式：

#container span { background-position: 0 0; }
#container.over span { background-position: 0 100%; }

更改父级的类将更改所有受影响的子级的样式：

$(textBox).bind('focus blur', function() { $('#container').toggleClass('over'); });

Answer 5

$("#test").bind("focus blur", function (e) {
    $(spans).css({"background-position": e.type === "focus" ? "0 100%" : "0 0"});
});

优化jquery代码

5 个答案: