我该如何简化这个？

Question

我是JS新手，正在自学。我想知道如何简化这个？这种块在我的脚本中重复了太多次。

$('.itemlist').on('focus', 'textarea.remarks', function (){
        $(this).animate({height: '50px'},400);});
$('.itemlist').on('blur', 'textarea.remarks', function (){
        $(this).animate({height: '15px'},400);});

干杯。

Answer 1

尝试一下，

var height='50px';
$('.itemlist').on('focus blur', 'textarea.remarks', function (){
    $(this).animate({height: height},400);
    height=(height=='50px') ? '15px' : '50px';
});

Answer 2

你也可以这样做：

$('.itemlist').on({
    focus: function(){
        $(this).animate({ height: '50px' }, 400);
    },
    blur: function(){
        $(this).animate({ height: '15px' }, 400);
    }
}, 'textarea.remarks');

不是说它更简单，而是看起来很漂亮。 :)

Answer 3

也许类似：

$('.itemlist').on('focusin focusout', 'textarea.remarks', function(evt)
{
    var px = 0;

    if(evt.type === 'focusin') px = 50;
    if(evt.type === 'focusout') px = 15;

    $(this).animate({ height: px }, 400);

});

更新：根据下面评论中的信息使用

focusin

和

focusout

。