JavaScript if语句

我正在创建一个激发不同函数的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();
    }
});

---

我认为你能做的最好的事情就是参数化你的moveSlide函数

function moveSlide(childNumber) {

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

---

实际上，您应该能够使用li上的ID做一些事情，以使其更加简化。我不确定HTML是如何布局的。如果你能提供一把小提琴，我们可能会取得更大的进步。

我认为你能做的最好的事情是将你的moveSlide函数参数化

function moveSlide(childNumber) {

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

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

实际上，您应该能够使用li上的ID做一些事情，以使其更加简化。我不确定HTML是如何布局的。如果你能提供一把小提琴，我们可能会取得更大的进步

$("#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函数参数化，这样您只需要一个将要移动的元素作为参数的函数：

    moveSlide(slide);

如果你的函数是局部变量，你仍然可以这样做

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

但我确实建议您将moveSlide函数参数化，这样您只需要一个将要移动的元素作为参数的函数：

    moveSlide(slide);

---

当然，您可以将代码简化为

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

但是，您应该优化移动子元素的方法，使其只具有一个函数而不是N，这样您就可以执行一个简单的调用：

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

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

---

当然，你可以直接进入元素，在元素内部找到位置。并保存一些元素选择，因为您要执行许多jQuery元素选择器调用。这将使您的代码大大加快并得到优化。

您当然可以将代码简化为这样

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

但是，您应该优化移动子元素的方法，使其只具有一个函数而不是N，这样您就可以执行一个简单的调用：

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

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

---

当然，你可以直接进入元素，在元素内部找到位置。并保存一些元素选择，因为您要执行许多jQuery元素选择器调用。这将使您的代码大大加快并得到优化。

您可以使用开关来完成工作：

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

---

您可以使用开关来完成工作：

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

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

var$list=$（'u ul li'）；//在这里设置缓存
变量$slide=$（“#slide-1”）；//在这里设置缓存
$（“#slide01 bttn”）。单击（函数（）{
变量位置=$list.index（$slide）；
如果（position>=1&&position如果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);
    }
}

var$list=$（'#特色_ulli'）；//在此处设置用于缓存
var$slide=$（“#slide-1”）；//在此处设置用于缓存
$（“#slide01 bttn”）。单击（函数（）{
变量位置=$list.index（$slide）；
如果（position>=1&&position if
#slide-1
始终是这些li元素之一，那么您可以使用查看它是哪个li，并组合
moveX（）
函数转换为单个更通用的函数，该函数从作为参数传递的索引开始工作……您能给我们展示一下
moveSlide…Child
函数吗？我想给它一个参数会容易得多。也许，您可以发布html&moveSlide[number]Child（）编码以便我们更好地了解发生了什么？如果幻灯片1始终是这些li元素之一，那么您可以使用查看它是哪一个li，并组合
moveX（）
函数转换为单个更通用的函数，该函数从作为参数传递的索引开始工作……您能给我们展示一下
moveSlide…Child
函数吗？我想给它一个参数会容易得多。也许，您可以发布html&moveSlide[number]Child（）编写代码以便我们更好地了解发生了什么？@Robangeler:正如阿甘所说：狗屎发生了；）@Robert Koritnik谢谢你的帮助。我相信有多种方法可以做到这一点。@Robangeler:正如阿甘所说：狗屎发生了；）@Robert Koritnik感谢您的帮助。我相信有多种方法可以实现这一点。这主意不错，但全局范围？全局方法附加到窗口对象，可以通过以下方式执行：window.moveSlide（slideum）；我没有说我想要它：-）它是-如果函数确实需要不同，你应该使用一个对象来存储它们。你可以将这些函数存储在你知道的局部变量中，而不是污染全局范围。@RobertKoritnik:我知道，我只是猜测OP确实污染了它：-）我已经提到了按名称存储它们的对象，我的回答使用了它们的数组…这主意不错，但是全局范围？全局方法附加到窗口对象，可以这样执行：window.moveSlide（slidenum）；我没有说我想要：-）它是-如果函数真的需要不同，你应该使用一个对象来存储它们。你可以将这些函数存储在你知道的局部变量中，而不是污染全局范围。@RobertKoritnik:我知道，我只是猜测OP确实污染了它：-）我已经提到了按名称存储它们的对象，我的答案使用了它们的数组…pedant“parameterize”/pedant“parameterize”/pedant