1

さまざまな関数を起動するifステートメントを作成しています。この機能を実現するためのより良い方法はありますか？

$("#slide01-bttn").click(function() {

    if ($("#slide-1").is('#featured_ul li:nth-child(1)'))
    {
    alert("First Child");
    moveSlideFirstChild();
    }

    if ($("#slide-1").is('#featured_ul li:nth-child(2)'))
    {
    alert("Second Child");
    moveSlideSecondChild();
    }

    if ($("#slide-1").is('#featured_ul li:nth-child(3)'))
    {
    alert("Third Child");
    moveSlideThirdChild();
    }

    if ($("#slide-1").is('#featured_ul li:nth-child(4)'))
    {
    alert("Fourth Child");
    moveSlideFourthChild();
    }
});
4

5 に答える 5

2 
$("#slide01-bttn").click(function() {
    var slide = $("#slide-1");
    var index = $('#featured_ul li').index(slide);
    var position = ["First", "Second", "Third", "Fourth"][index];
    if (position) {
        alert(position+" Child");
        // assuming they are global functions:
        window["moveSlide"+position+"Child"]();
    }
});

関数がローカル変数である場合でも、次のことができます。

    var fn = [moveSlideFirstChild, moveSlideSecondChild, moveSlideThirdChild, moveSlideFourthChild][index];
    if (fn) fn();

ただし、moveSlide関数をパラメーター化することを強くお勧めします。これにより、要素を引数として移動する関数が1つだけ必要になります。

    moveSlide(slide);
于 2012-09-26T13:44:41.557 に答える
2

もちろん、コードをこれに単純化することもできます

var pos = $("#slide-1").prevAll().length;
switch (pos)
{
    case 0:
        ...
        break;
    case 1:
        ...
        break;
    ...
    default:
        ...
        break;
}

ただし、子要素を移動するメソッドを最適化して、単純な呼び出しを実行できるように、 Nではなく1つの関数のみを使用する必要があるようです。

var elem = $("#slide-1");

// pass position AND element because you'll likely use it inside
moveSlideChild(elem.prevAll().length, elem);

もちろん、要素を渡して内部の位置を取得することもできます。また、多くのjQuery要素セレクター呼び出しを行っているため、いくつかの要素選択を保存します。これにより、コードが大幅に高速化され、最適化されます。

于 2012-09-26T13:45:36.683 に答える
1

私はあなたができる最善のことはあなたのmoveSlide関数をパラメータ化することだと思います

function moveSlide(childNumber) {

    //Grab the child element you are looking for
    //Move it code
}

本当にあなたはそれをさらに単純化するためにliのIDで何かをすることができるはずです。HTMLがどのようにレイアウトされているかわかりません。あなたがフィドルを提供することができれば、私たちはおそらくもっと進歩することができます。

于 2012-09-26T13:39:24.240 に答える
1

スイッチを使用して作業を完了することができます。

$("#slide01-bttn").click(function() {
var pos = $("#slide-1").prevAll().length;
switch(pos)
{
case 0:
case 1:
  moveSlide(pos);
  break;
default:
  //code to be executed if pos is different from case 0 and 1
}
}

function moveSlide(childNumber) {

    //Grab the child element you are looking for
    //Move it code
}
于 2012-09-26T13:45:46.703 に答える
0

moveSlideNChild（）がすべて同様のことを行う場合は、コードの量を減らすために抽象化を適用するのが最善です。その後、電話をかけることができます

var $list  = $('#featured_ul li');             // set here for cacheing
var $slide = $("#slide-1");                    // set here for cacheing

$("#slide01-bttn").click(function() {
    var position = $list.index($slide);
    if( position >= 1 && position <= 4) {      // only want 1 through 4
        alert('Child ' + position);
        moveSlideChild(position);
    }
}
于 2012-09-26T13:49:04.193 に答える