JavaScript if語句

Question

我正在創建一個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(); 
    } 
}); 

Answer 1

你當然可以簡化你的代碼，這

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

但似乎你應該優化你的方法是移動的子元素到只有一個功能，而不是ň所以你可以做一個簡單的電話：

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

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

你當然可以只通過在元素和獲取位置內。並保存一些元素選擇，因爲你正在做許多jQuery元素選擇器調用。這將使您的代碼顯着加快並優化。

Answer 2

我認爲你可以做的是最好的事情，以paramatize您moveSlide功能

function moveSlide(childNumber) { 

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

真的，你應該能夠做到與李娜IDS的東西簡化它甚至更多。我不確定HTML是如何佈局的。如果你能提供小提琴，我們可能會取得更多進展。

Answer 3

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

但我真的建議paramatize你moveSlide功能，讓你只需要一個需要移動作爲元素參數：

moveSlide(slide); 

Answer 4

你可以使用一個開關來完成這項工作：

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

Answer 5

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