Question

我正在尝试减少“ focusin”和“ focusout”代码上的冗余代码。本质上，我要根据是否关注网页输入来添加/删除类。

我已经尝试使用focus（）方法代替focusin / focusout。我也尝试过toggleClass（）。

// On focus, remove the class of reduce and add the class of expand
$('input[type="text"]').on('focusin', function(){
    $(this).removeClass('reduce');
    $(this).addClass('expand');
});

// On focus out, add class reduce and remove class expand
$('input[type="text"]').on('focusout', function () {
    $(this).addClass('reduce');
    $(this).removeClass('expand');
});

目前它可以正常工作，但我只想减少冗余代码。

Answer 1

现在唯一的“冗余”部分将是$（this）部分，因为您可以像下面那样链接那些jQuery调用：

// On focus, remove the class of reduce and add the class of expand
$('input[type="text"]').on('focusin', function(){
    $(this).removeClass('reduce').addClass('expand');
});

// On focus out, add class reduce and remove class expand
$('input[type="text"]').on('focusout', function () {
    $(this).addClass('reduce').removeClass('expand');
});

编辑：请注意

// On focus, remove the class of reduce and add the class of expand
$('input[type="text"]').focus(function(){
    $(this).removeClass('reduce').addClass('expand');
});

// On focus out, add class reduce and remove class expand
$('input[type="text"]').blur(function () {
    $(this).addClass('reduce').removeClass('expand');
});

基于this selected answer，对于将事件冒泡到子节点（针对focusin / out直接处理程序而不是jQuerys api .focus / .blur

提到），可能是一个更好的选择。

Answer 2

您要在2个单独的事件上触发代码，所以我唯一要做的重构是

$('input[type="text"]').on('focusin', function(){
// On focus, remove the class of reduce and add the class of expand
    $(this).toggleClass('expand reduce');
}).on('focusout', function () {
// On focus out, add class reduce and remove class expand
    $(this).toggleClass('reduce expand');    
});

Answer 3

不太短，但是如果您真的需要减少代码，这可能对您有用：

$('input[type="text"]').on('focusin focusout', function(ev){
    var isFocusIn = ev.type === 'focusin';
    $(this).toggleClass('reduce', !isFocusIn).toggleClass('expand', isFocusIn);
});

在“ Focusin / Focusout”上简化jQuery代码

3 个答案: