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

Question

关于我最近问的一个问题，请看这里。你应该看的唯一答案是被选为最佳答案的答案。使用来自这个问题的建议，我通过使用数组和循环使我的代码(在一个部分中)更加简洁。而且起作用了！

我认为我应该对代码中的另一部分进行同样的处理，因为它们具有类似的代码冗余。但是，在更改代码后，它将无法工作。

你知道问题出在哪里吗？

$(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没有被打开。

Answer 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来获取鼠标坐标，并做了一些其他的假设，但是您可以看到区域切换。