2

私はjQueryにかなり慣れていないので、次のjQueryコードのブロックにいくつかのポインターが必要です。より良いコードを書くことに興味があります。

基本的に、コードは2つのメニュー項目のいずれかをクリックするとコンテンツを左からスライドインし、さらにクリックするとコンテンツをスライドアウトします。私はそれを2つの関数ではなく1つのコードブロックに結合しようとしていると思います。

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

});

それでおしまい！これは私の最初の投稿なので、ルールを破っていないことを願っています。誰かが私をより良くするのを手伝ってくれるでしょう！

トムよろしく

編集

みんなありがとう！いくつかの回答に関連する詳細を少し見逃したと思うので、まだ回答にマークを付けたくありませんでした。

2つのクラス.slidingと.sliding1は、別々のdivに追加されます。1つはportfolioと呼ばれ、もう1つはaboutと呼ばれます。

つまり、aboutメニュー項目をクリックするとabout divがスライドインし、ポートフォリオメニュー項目をクリックするとaboutがスライドアウトし、ポートフォリオがスライドインします。ただし、項目が表示されていない場合は、クリックするとスライドインします。

これで問題が明確になることを願っています。いずれかのメニュー項目がクリックされたときに、一部の回答が同じコンテンツにスライドするだけです。

ありがとう！

4

4 に答える 4

1

ここで最初に目にする問題は、コードのほとんどが重複していることです。これはjQuery自体とは関係がなく、DRYの問題です。jQueryが提供する：visibleと：hiddenの両方の疑似クラスを利用して、共通のコードを1つの場所にラップします。また、変数名を繰り返し使用しないようにチェーンを利用します。最後になりましたが、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

ここでできることがいくつかあります。

  • :visible「none」の CSS 表示値をチェックする代わりに、jQuery のセレクターを利用する
  • 同じ要素のメソッドを別々の行に追加するのではなく、1 つの行に連結します
  • 2 つのクリック関数の唯一の違いは、それらが呼び出される要素であるように見えるため、代わりに、セレクターのコンマ区切りリストを使用して単一のクリック関数を使用することができます

あなたのコードの適応バージョンは次のとおりです。

編集以下のリカルドからのコメント フィードバックに基づいて、2 つのスライディング変数のセレクターを呼び出して渡すことができる関数を追加しました。

$("#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 に答える