2

我对 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 中——一个称为投资组合，一个称为 about。

所以想法是，如果您单击 about 菜单项，about div 会滑入，然后如果您要单击投资组合菜单项，那么 about 会滑出，投资组合会滑入。但如果没有显示任何项目，那么您的项目点击会滑入。

希望这可以澄清一些事情，当单击任一菜单项时，一些答案只会滑入相同的内容中。

谢谢！

4

4 回答 4

1

我在这里看到的第一个问题是您的大部分代码都是重复的，这与 jQuery 本身无关，这是一个 DRY 问题。利用 jQuery 提供的 :visible 和 :hidden 伪类，将您的公共代码包装在一个地方，并利用链接来避免一遍又一遍地重复使用变量名；最后但同样重要的是，在 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);
});
于 2013-02-22T11:49:47.230 回答
0

使用多个 id 选择器，但您可以改用一个类。

 var sliding = $('.sliding');
 var sliding1 = $('.sliding1');

$('#menu-item-91, #menu-item-17').click(function(e) {
    e.preventDefault();
    if (sliding.css('display') === "none" && sliding1.css('display') === "none" ) { //show it`enter code here`
        sliding.fadeIn(0)
               .animate({"left": 0},800);
    }else if (sliding.css('display') === "none" && sliding1.css('display') === "block" ) {
        sliding1.animate({"left": -300},500 )
                .delay(500)
                .fadeOut(0);
        sliding.fadeIn(0)
               .animate({"left": 0}, 800);
    } else {
        sliding.animate({"left": -300},500)
               .delay(500).fadeOut(0);
    }
}
于 2013-02-22T11:45:24.670 回答
0

你可以在这里做几件事：

  • 使用 jQuery 的:visible选择器而不是检查 CSS 显示值是否为“无”
  • 将同一元素上的方法链接在一行中，而不是将它们添加到单独的行中
  • 看起来这两个点击函数之间的唯一区别是它们被调用的元素，因此可以使用带有逗号分隔的选择器列表的单击函数

这是您的代码的改编版本：

编辑我添加了一个函数，您可以根据下面里卡多的评论反馈调用并传入两个滑动变量的选择器：

$("#menu-item-17").click(function(e) {
  e.preventDefault();
  handleSlider($(".sliding1"), $(".sliding"));
});

$("#menu-item-91").click(function(e) {
  e.preventDefault();
  handleSlider($(".sliding"), $(".sliding1"));
});

function handleSlider(sliding, sliding1)
{
  if (!sliding.is(":visible") && !sliding1.is(":visible"))  //show it
  {
    sliding.fadeIn(0).animate({"left": 0},800);
  } 
  else if (!sliding.is(":visible") && sliding1.is(":visible")) 
  {
    sliding1.animate({"left": -300},500 ).delay(500).fadeOut(0);
    sliding.fadeIn(0).animate({"left": 0},800);
  } else {
    sliding.animate({"left": -300},500 ).delay(500).fadeOut(0);
  }
}
于 2013-02-22T11:45:56.137 回答
0 
        function slideThis(sliding,sliding1)
        {
             if(sliding.is(":visible"))
             sliding.animate({"left": -300},500 ).delay(500).fadeOut(0);

             else 
             {
                 if(sliding1.is(":visible"))
                 sliding1.animate({"left": -300},500 ).delay(500).fadeOut(0);

                 sliding.fadeIn(0).animate({"left": 0},800);
             }    

        }


    var sliding = $('.sliding');
    var sliding1 = $('.sliding1');

    $('#menu-item-91').click(function(e) {
        e.preventDefault();
        slideThis(sliding,sliding1); //notice the changes in parameter name
    });

    $('#menu-item-17').click(function(e) {
        e.preventDefault();
        slideThis(sliding1,sliding); //notice the changes in parameter name
    });
于 2013-02-22T11:46:15.873 回答