JQuery/JS 数组 - 循环代码帮助答案

【问题标题】：JQuery/JS Arrays - Looping Code HelpJQuery/JS 数组 - 循环代码帮助
【发布时间】：2011-07-24 21:00:48
【问题描述】：

请参阅 here 了解我最近提出的问题。您应该查看的唯一答案是被选为最佳答案的答案。使用该问题的建议，我通过使用数组和循环使我的代码（在一个部分中）更加简洁。它有效！

我认为我应该对代码的另一部分执行相同的操作，其中包含类似的代码冗余。但是改了代码之后就不行了。

您知道可能是什么问题吗？

$(document).ready(function()
{
  $("#container").click(function(e)
  {
    // Added to avoid confusion. Not all variables are not posted, 
    // but they are present in my actual code.
    var areaX = x/xScale;
    var areaY = y/yScale;

    // Arrays containing the min and max x and y values of the rectangular area around a farm
    var minX = [47, 593, 593, 958, 600, 744, 852, 1025, 1060, 1159, 1366];
    var maxX = [553, 958, 792, 1011, 1124, 1124, 1149, 1598, 1280, 1623, 1551];
    var minY = [250, 250, 473, 349, 526, 665, 495, 248, 471, 520, 481];
    var maxY = [330, 473, 515, 478, 665, 721, 526, 471, 500, 763, 520];

    /** Loops through the values within the coordinate arrays to
        determine if the user clicked within a certain area **/
    for (var i = 0; i < minX.length; i++)
    {
      if(areaX >= minX[i] && areaX <= maxX[i] && areaY >= minY[i] && areaY <= maxY[i]) 
      {
        if(i = 0)
        {
          $("#region1").toggle(); //toggle on
        }
        if(i > 0 && i < 4) // 1-3
        {
          $("#region2").toggle(); //toggle on
        }
        if(i > 3 && i < 7 ) // 4-6
        {
          $("#region3").toggle(); //toggle on
        }
        if(i > 6 && i < 9) // 7-8
        {
          $("#region4").toggle(); //toggle on
        }
        if(i > 8 && i < 11) // 9-10
        {           
          $("#region5").toggle(); //toggle on
        }
        $("#container").toggle(); //toggle off
        $("#backButton").toggle(); //toggle on
      }
    }
    });
});

我将继续发布我之前拥有的代码，该代码运行正常。请注意，此代码与上述代码在相同的函数中，尽管我没有重新发布这些函数。另外，我确实省略了一些代码（例如构成您在下面看到的第一组变量的变量），因为它们不应该与问题/解决方案相关。

var Panhandle_X = x/xScale;
var Panhandle_Y = y/yScale;

var region2_X = x/xScale;
var region2_Y = y/yScale;

var region3_X = x/xScale;
var region3_Y = y/yScale;

var region4_X = x/xScale;
var region4_Y = y/yScale;

var region5_X = x/xScale;
var region5_Y = y/yScale;

//Switches the displayed div to Panhandle
if(Panhandle_X >= 47 && Panhandle_X <= 553 && Panhandle_Y >= 250 && Panhandle_Y <= 330) 
{
  $("#region1").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}

//Switches the displayed div to region 2
if(region2_X >= 593 && region2_X <= 958 && region2_Y >= 250 && region2_Y <= 473) 
{
  $("#region2").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}   
if(region2_X >= 593 && region2_X <= 792 && region2_Y >= 473 && region2_Y <= 515) 
{
  $("#region2").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
if(region2_X >= 958 && region2_X <= 1011 && region2_Y >= 349 && region2_Y <= 478) 
{
  $("#region2").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}   

//Switches the displayed div to region 3
if(region3_X >= 600 && region3_X <= 1124 && region3_Y >= 526 && region3_Y <= 665) 
{
  $("#region3").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
if(region3_X >= 744 && region3_X <= 1124 && region3_Y >= 665 && region3_Y <= 721) 
{
  $("#region3").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
if(region3_X >= 852 && region3_X <= 1149 && region3_Y >= 495 && region3_Y <= 526) 
{
  $("#region3").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
    
//Switches the displayed div to region 4
if(region4_X >= 1025 && region4_X <= 1598 && region4_Y >= 248 && region4_Y <= 471) 
{
  $("#region4").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
if(region4_X >= 1060 && region4_X <= 1280 && region4_Y >= 471 && region4_Y <= 500) 
{
  $("#region4").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}
    
//Switches the displayed div to region 5
if(region5_X >= 1159 && region5_X <= 1623 && region5_Y >= 520 && region5_Y <= 763) 
{
  $("#region5").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
} 
if(region5_X >= 1366 && region5_X <= 1551 && region5_Y >= 481 && region5_Y <= 520) 
{
  $("#region5").toggle(); //toggle on
  $("#container").toggle(); //toggle off
  $("#backButton").toggle(); //toggle on
}

编辑如前所述，我尝试循环遍历数组的新代码不起作用。它（通常）不会识别任何点击，因此不会切换。有时，如果我重新加载页面并先在 region1 中单击，它会使容器 div 关闭，按钮打开，但按钮无法识别点击，加上 region1 div 未打开。

【问题讨论】：

我应该继续提到我检查if(i > 0 && i < 4) // 1-3等的原因是因为锅柄只有一组坐标，区域2为3，区域3为3等.
我需要知道要打开哪个区域。
areaX 分配在哪里？
areaX 在函数中赋值；我没有发布它来试图使代码更短一些阅读
Briz，这不是它的工作原理。 请勿将专有信息发布到任何公共网站，除非您打算将其永久公开。出于问责原因，您的专有信息仍可在此问题的编辑历史记录中找到，并且任何人都不能触及.

标签： javascript arrays for-loop jquery

【解决方案1】：

一些想法，虽然你没有提到你遇到了什么“问题”，除了“它不起作用”。 损坏的部分很可能是您没有发布的一段代码，特别是获取鼠标坐标的部分。我没有看到任何设置areaX 或areaY 的代码

1) 如果您使用互斥区域，请使用else。一旦一个区域匹配，就没有理由检查下一个区域。您还只需要检查上限，就像else 默认情况下您会获得下限：

if (i = 0) {
    $("#region1").toggle(); //toggle on
} else if (i < 4) { // 1-3
    $("#region2").toggle(); //toggle on
} else if (i < 7) { // 4-6
   ...

2) 但是，您可以通过查找您所在地区的数组来大大简化您的操作，而不是大的 if/then/else：

$(document).ready(function() {

    // Arrays containing the min and max x and y values of
    // the rectangular area around a farm
    var minX = [47, 593, 593, 958, 600, 744, 852, 1025, 1060, 1159, 1366];
    var maxX = [553, 958, 792, 1011, 1124, 1124, 1149, 1598, 1280, 1623, 1551];
    var minY = [250, 250, 473, 349, 526, 665, 495, 248, 471, 520, 481];
    var maxY = [330, 473, 515, 478, 665, 721, 526, 471, 500, 763, 520];

    // Lookup array
    var region = [1,2,2,2,3,3,3,4,4,5,5];

    $("#container").click(function(e) {

        // Loops through the values within the coordinate arrays to
        // determine if the user clicked within a certain area
        for (var i = 0; i < minX.length; i++) {
            if (areaX >= minX[i] && areaX <= maxX[i] && 
                areaY >= minY[i] && areaY <= maxY[i]) {

                // Lookup of region for 'i'
                $("#region"+region[i]).toggle(); //toggle on

                $("#container").toggle(); //toggle off
                $("#backButton").toggle(); //toggle on
            }
        }
    });
});

如果没有更多您的代码，我不确定出了什么问题，但我在这里拼凑了一个似乎可以工作的 jsfiddle 演示：

http://jsfiddle.net/jtbowden/3AWHZ/

我做了一个快速而肮脏的 pageX/pageY 来获取鼠标坐标，并做了一些其他假设，但你可以看到区域切换。

【讨论】：

#2 中的建议更简洁。我尝试了else if 建议和#2，但都没有奏效。我将编辑我原来的问题，说明它是如何“不工作”的
在将我的代码切换为您的#2 模型后，div 根本不会切换，但是当我刷新时页面重新加载速度要快得多
我在这里放了一个demo：jsfiddle.net/jtbowden/3AWHZ这可能不会像你的代码那样做，但它表明原理是有效的。