优化jquery代码答案

【问题标题】：Optimize jquery code优化jquery代码
【发布时间】：2011-11-03 07:03:42
【问题描述】：

$(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* });

或者别的什么。

任何帮助将不胜感激。 =)

【问题讨论】：

确实是偏执狂。哈哈，开个玩笑。
jQuery 尚不支持读心术，尽管您可能会在不久的将来看到它。 ;)

标签： javascript jquery optimization

【解决方案1】：

试试这个：

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

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

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

祝你好运！

【讨论】：

chaining... 但我们能不能做到像 $(textBox).bind('focus blur', function() { do toggle here });
我认为这对我们亲爱的朋友来说仍然不够“优化”：P
=)... 只是有toggleClass，那么有没有toggleCss之类的？

【解决方案2】：

你也可以试试这个：

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

});

【讨论】：

【解决方案3】：

我认为优化和代码清晰之间有一条线。在没有任何进一步证据的情况下，我认为您不会在优化方面看到任何重大改进。

将这两个分开可以非常快速和轻松地扫描...没有逻辑可以通过。它只是“当这种情况发生时，然后这样做”。很简单，你可能会失去，如果有的话，很少。

编辑：如果像你在评论中提到的那样你想切换课程，你可以

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

【讨论】：

非常感谢您的帮助...但我需要在那里使用纯 css 而不是类。 =) 我想我会坚持我的代码+链接...
你可以： var currentCss = $(this).css('background-position'); var newCss = currentCss == "0 100%" ? “0 0”：“0 100%”； $(this).css('backgroun-position', newCss);
@jerjer 的解决方案比我的更整洁 :-)

【解决方案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'); });

【讨论】：

【解决方案5】：

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

【讨论】：