如何在JavaScript中从数组中选择多个参数(jQuery.path)

Question

我正在尝试根据用户使用jQuery.path进行的多次单击来动画特定的HTML元素。我遇到的问题是，我不确定选择相对于所选元素的参数的最佳方法。

下面是我当前的代码:

    var segment1Params = {
       start: {
          x: 414,
          y: 121,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }
    var segment2Params = {
       start: {
          x: 494,
          y: 104,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }
    var segment3Params = {
       start: {
          x: 420,
          y: 306,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      }
    var segment4Params = {
       start: {
          x: 514,
          y: 389,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      } 
    var segmentSelected = 1;
    $('body').click(function () {
        segmentSelected += 1; //the amount of user clicks
        $("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})
        if (segmentSelected == 5) {
            segmentSelected = 1; //reset the amount of user clicks (looping)
        }
    });

理想情况下，我希望line…

$("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})

…选择一组正确的参数。

我认为这可以用数组来完成，但在语法上我不确定最好的方法。

Answer 1

你可以把所有的片段放到一个数组中，并使用一个函数，该函数以片段编号作为参数并执行动画。

注意segments[sid-1] -这是因为在DOM中看起来你的片段从1开始:#segment-1, #segment-2等等，但数组元素总是默认从0开始。

另一件事是用0初始化segmentSelected:这是因为该变量应该表示用户单击body元素的次数，并且最初表示在任何单击发生之前"0次"。

var segments = [{
       start: {
          x: 414,
          y: 121,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      },
     {
       start: {
          x: 494,
          y: 104,
          angle: 358.156,
          length: 0.300
        },
        end: {
          x: 114,
          y: 121,
          angle: 0.229,
          length: 0.704
        }
      } ... ];
       var segmentSelected = 0;
       function animateSegment(sid)
       {
                  $("#segment-"+sid).animate({path : new $.path.bezier(segments[sid-1])});
       }
       $('body').click(function () {
        segmentSelected += 1; //the amount of user clicks
        animateSegment(segmentSelected);
        if (segmentSelected == 5) {
            segmentSelected = 0; //reset the amount of user clicks (looping)
        }
    });

Answer 2

你可以使用类似这样的数组:

var selectedSegment = 1;
var segments = [];
segments.push({
    start: {
        x: 414,
        y: 121,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
});
segments.push({
    start: {
        x: 494,
        y: 104,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})
segments.push({
    start: {
        x: 420,
        y: 306,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})
segments.push({
    start: {
        x: 514,
        y: 389,
        angle: 358.156,
        length: 0.300
    },
    end: {
        x: 114,
        y: 121,
        angle: 0.229,
        length: 0.704
    }
})

然后像这样使用:

console.log(segments[selectedSegment]);

---

附注

---

我在上面的例子中使用array.push()，它在数组的末尾添加了一个新元素。

要在数组的开头添加一项，请使用 array .unshift()。