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