javascript - 使用Javascript在特定数组值之前添加所有数组值

在我的软件中，我有一个扩展查看器，可将页面彼此对齐。页数可以变化。用户可以在这些页面上放置注释。我希望能够通过将x坐标与页面宽度的总和进行比较来判断要添加注释的页面。

对于此示例，假设我有一个4页的页面。我构建了一个具有以下值的js数组widthArr[]：[297, 300, 305, 410]

所以当然要遵循

widthArr[0] = 297 //page 1 width
widthArr[1] = 300 //page 2 width
widthArr[2] = 305 //page 3 width
widthArr[3] = 410 //page 4 width

因此，如果x坐标为400，那么我将知道该注释被放置在第2页上。

有没有一种方法可以动态循环浏览这些页面，并以某种方式检查x是否大于先前所有页面宽度的宽度？

在这种特定情况下，我需要检查以下内容：

是x > (widthArr[0] + widthArr[1] + widthArr[2])吗？然后，用户在第4页上添加注释。

是x > (widthArr[0] + widthArr[1])吗？然后，用户将注释添加到页面3。

是x > widthArr[0]吗？然后，用户将注释添加到页面2。如果不是，则用户将注释添加到页面1。

我从以下for循环开始。

var spreadPagesLength = 4;
var x = 400;
var i;
for (i = 0; i < spreadPagesLength; ++i) {

}

任何帮助表示赞赏。非常感谢。

最佳答案

保持到目前为止已看到的宽度总和，当宽度超过break时保持x：

var widthArr = [297, 300, 305, 410];
var page = widthArr.length + 1;   // after the last page, as a default
var x = 400;
var totalWidth = 0;

for ( var i = 0; i < widthArr.length; ++i )
{
  totalWidth += widthArr[i];

  if (x < totalWidth)
  {
    page = i + 1;
    break;
  }
}