javascript - 如何从 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)
        }
    });

理想情况下我想要这条线......

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