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 に答える