Оптимизировать код jquery

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() { $(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 4

Я думаю, что есть грань между оптимизацией и ясностью кода. Без каких-либо дополнительных доказательств я не верю, что вы увидите какие-либо существенные улучшения в плане оптимизации.

Хранение этих двух отдельных элементов позволяет очень быстро и легко сканировать ... Никакой логики. Просто «Когда это произойдет, тогда сделай это». Просто, и вы, вероятно, проигрываете, если что, очень мало.

Edit: Если, как вы упомянули в комментарии, вы хотите переключить класс, вы можете

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

Answer 5

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