jquery - 我怎样才能让这个 jQuery 更加简洁？

Question

我对 jQuery 相当陌生，想要一些关于我的以下 jQuery 代码块的指导，我对编写更好的代码感兴趣。

基本上，当您单击两个菜单项之一时，代码只是将内容从左侧滑入，然后再单击一次将其滑出。我想我正在尝试将它组合成一个代码块而不是两个函数。

$('#menu-item-91').click(function(e) {
    e.preventDefault();
    //console.log("Clicked");
    //$('.about').css('display','inherit').slideDown(3000);
    var sliding = $('.sliding');
    var sliding1 = $('.sliding1');

    if( sliding.css('display') == "none" && sliding1.css('display') == "none" ) { //show it
        sliding.fadeIn(0);
        sliding.animate({"left": 0},800);
    }else if ( sliding.css('display') == "none" && sliding1.css('display') == "block" ) {

        sliding1.animate({"left": -300},500 );
        sliding1.delay(500).fadeOut(0);
        sliding.fadeIn(0);
        sliding.animate({"left": 0},800);
    } else {

        sliding.animate({"left": -300},500 );
        sliding.delay(500).fadeOut(0);
    }

});

$('#menu-item-17').click(function(e) {
    e.preventDefault();
    //console.log("Clicked");
    //$('.about').css('display','inherit').slideDown(3000);
    var sliding = $('.sliding1');
    var sliding1 = $('.sliding');

    if( sliding.css('display') == "none" && sliding1.css('display') == "none" ) { //show it
        sliding.fadeIn(0);
        sliding.animate({"left": 0},800);
    }else if ( sliding.css('display') == "none" && sliding1.css('display') == "block" ) {

        sliding1.animate({"left": -300},500 );
        sliding1.delay(500).fadeOut(0);
        sliding.fadeIn(0);
        sliding.animate({"left": 0},800);
    } else {

        sliding.animate({"left": -300},500 );
        sliding.delay(500).fadeOut(0);
    }

});

就是这样!这是我的第一篇文章，所以我希望我没有违反任何规则，并且有人可以帮助我变得更好!

问候汤姆

编辑

谢谢大家!还不想标记答案，因为我想我可能错过了一些与某些答案相关的细节。

两个类 .sliding 和 .sliding1 被添加到单独的 div 中 - 一个称为portfolio，一个称为 about。

所以我们的想法是，如果您单击“关于”菜单项，“关于”div 就会滑入，然后如果您单击“投资组合”菜单项，那么“关于”就会滑出，而投资组合就会滑入。但是如果没有显示任何项目，那么您点击的项目将会滑入。

希望这能澄清问题，当单击任一菜单项时，某些答案只是滑入相同的内容。

谢谢!

Answer 1

我在这里看到的第一个问题是你的大部分代码都是重复的，这与 jQuery 本身无关，这是一个 DRY 问题。利用 jQuery 提供的 :visible 和 :hidden 伪类并将公共(public)代码包装在一个地方，并利用链接来避免一遍又一遍地重复使用变量名称；最后但并非最不重要的一点是，在 jQuery 对象变量上使用 $ 前缀，这样它们就可以立即脱颖而出:

var $sliding1,
    $sliding2;

function doSlide($item1, $item2) {
    if ($item1.is(':hidden') && $item2.is(':hidden')) { //show it
        $item1.fadeIn(0)
             .animate({"left": 0}, 800);
    }
    else if ($item1.is(':hidden') && $item2.is(':visible')) {
        $item2.animate({"left": -300}, 500)
             .delay(500)
             .fadeOut(0);
        $item1.fadeIn(0)
             .animate({"left": 0}, 800);
    }
    else {
        $item1.animate({"left": -300}, 500)
             .delay(500)
             .fadeOut(0);
    }
}

function fetchSliders() {
  $sliding1 = $sliding1 || $('.sliding');
  $sliding2 = $sliding2 || $('.sliding1');
}

$('#menu-item-91').click(function(e) {
    e.preventDefault();
    fetchSliders();
    doSlide($sliding1, $sliding2);
});

$('#menu-item-17').click(function(e) {
    e.preventDefault();
    fetchSliders();
    doSlide($sliding2, $sliding1);
});