0

是否有更优雅的方式来编写以下 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
//*/
}

感谢您的任何建议！

4

1 回答 1

1

.section您可以通过这样做来缓存：

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

并更改您的语句以使用该变量，例如：

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

我也看不出有任何理由在循环中进行绑定......只是做

$('#jqpanel .jqpanel-container').on({...});
于 2013-08-09T18:22:13.953 回答