Question

请参阅 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未切换。

Answer 1

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

1）如果您使用互斥区域，请使用areaY。一旦一个地区匹配，就没有理由检查下一个地区。您还必须检查上限，与else一样，默认情况下您会获得下限：

else

2）但是，您可以通过对您的区域进行数组查找来大大简化，而不是大if (i = 0) { $("#region1").toggle(); //toggle on } else if (i < 4) { // 1-3 $("#region2").toggle(); //toggle on } else if (i < 7) { // 4-6 ...：

if/then/else

如果没有更多的代码，我不确定是什么问题，但我在这里打了一个似乎有用的jsfiddle演示：

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

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

JQuery / JS Arrays - 循环代码帮助

1 个答案: