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。

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

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

谢谢！

Answer 1

我在这里看到的第一个问题是你的大多数代码都是重复的，而这与jQuery本身无关，这是一个干燥的问题。利用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);
});

Answer 2

使用多个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);
    }
}

Answer 3

您可以在这里做一些事情：

使用jQuery的:visible选择器，而不是检查＆＃39; none＆＃39;
将您的方法在一行上链接在同一元素上，而不是将它们添加到单独的行上
看起来两个点击功能之间的唯一区别是它们被调用的元素，因此可能使用带有逗号分隔的选择器列表的单击功能

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

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

$("#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);
  }
}

Answer 4

        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
    });

如何让这个jQuery更简洁？

4 个答案: