jquery help пытается уменьшить $ (this) утверждения внутри метода

Question

Будет ли более элегантный способ написать следующий код jQuery? по какой-то причине я просто не думаю, что все инструкции find («. section») необходимы ... но если это хорошо, сообщите мне.

function jqPanels() { 
$('#jqpanel .jqpanel-container').each(function() { 
$(this).on({ 
    mouseenter: function() { 
     if ($(this).find('.section').next().css('display') == "block") { 
      $(this).find('.section').removeClass('jqarrow-down'); 
     } else { 
      $(this).find('.section').addClass('jqarrow-down'); 
     } 
    }, 
    mouseleave: function() { 
     if ($(this).find('.section').next().css('display') == "block") { 
      $(this).find('.section').addClass('jqarrow-up'); 
     } else { 
      $(this).find('.section').removeClass('jqarrow-down jqarrow-up'); 
     } 
    }, 
    click: function(e) { 
     e.preventDefault(); 
     var mclass=$(this).find('.section').attr('class').split(' ')[1]; 
     var $mcontent = $("#" + mclass); 
     if ($mcontent.is(':hidden')) { 
      $mcontent.delay(100).fadeIn().slideDown().prev().addClass('jqarrow-up').removeClass('jqarrow-down'); 
     } else { 
      $mcontent.delay(100).slideUp().prev().addClass('jqarrow-down'); 
     } 
    }    
    });//end on event handler  
});//end each loop 
//*/ 
} 

обновление:

Вот мой модифицированный код, который, кажется, работает

function jqPanels() { 
$('#jqpanel .jqpanel-container').each(function() { 
    var $section = $(this).find('.section'); 
$(this).on({ 
    mouseenter: function() { 
     if ($section.next().css('display') == "block") { 
      $section.removeClass('jqarrow-down'); 
     } else { 
      $section.addClass('jqarrow-down'); 
     } 
    }, 
    mouseleave: function() { 
     if ($section.next().css('display') == "block") { 
      $section.addClass('jqarrow-up'); 
     } else { 
      $section.removeClass('jqarrow-down jqarrow-up'); 
     } 
    }, 
    click: function(e) { 
     e.preventDefault(); 
     var mclass=$(this).find('.section').attr('class').split(' ')[1]; 
     var $mcontent = $("#" + mclass); 
     if ($mcontent.is(':hidden')) { 
      $mcontent.delay(100).fadeIn().slideDown(); 
      $section.addClass('jqarrow-up').removeClass('jqarrow-down'); 
     } else { 
      $mcontent.delay(100).slideUp(); 
      $section.addClass('jqarrow-down'); 
     } 
    }    
    });//end on event handler  
});//end each loop 
//*/ 
} 

Спасибо за любые советы!

Answer 1

Вы можете кэшировать .section, делая это:

var $section = $(this).find('.section'); 

И изменить ваши заявления использовать эту переменную, как это, например:

$section.removeClass('jqarrow-down'); 

Я также не вижу никаких причин сделайте привязку в петле ... просто сделайте

$('#jqpanel .jqpanel-container').on({...});