这个 JS/Jquery 方法有什么问题？ （数组、点击事件）

Question

编辑 我已经弄清楚出了什么问题。如果您想看看是否也能找到它，请随意。否则我在答案中发布了答案。

我将继续发布所有代码，因为我之前已经问过这个问题，但遗漏了我认为对于发现问题不必要的东西，但回答者想要所有的代码。

以下代码是根据我的其他一些代码建模的，这些代码工作得很好，但在这种方法中它不想工作。我有一个名为 #container 的初始 div，它是俄克拉荷马州地图的图像，在该图像上您可以看到该州的不同部分。在我的旧代码中，当用户单击片段的特定区域时，它会关闭 #container div 并打开该片段的“放大”图片的图像的 div。在我的新代码应该使我的代码更简洁之后，它不会关闭 #container （而且我怀疑不会打开新的 div）。

我通过用户单击时的鼠标位置来确定要打开哪个段 (#region)。我使用像素坐标，并且我已经完成了缩放这些坐标的数学运算，因此屏幕尺寸是什么并不重要。

现在，这是新的且有缺陷的代码：

$(document).ready(function()
{


//Main Oklahoma map
$("#container").click(function(e)
{
    var x = event.pageX;
    var y = event.pageY;

    const scaling_Screen_Max_Pixel_X = 1679;
    const scaling_Screen_Max_Pixel_Y = 924;

    // Math for the scaling of different sized windows
    var currentX = $(document).width();
    var currentY = $(document).height();
    var xScale = currentX/scaling_Screen_Max_Pixel_X;
    var yScale = currentY/scaling_Screen_Max_Pixel_Y;

    // Variables for different regions
    var zoneX = x/xScale;
    var zoneY = 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];

    var regionNumber = [1,2,2,2,3,3,3,4,4,5,5];

    /** 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(zoneX >= minX[i] && zoneX <= maxX[i] && zoneY >= minY[i] && zoneY <= maxY[i]) 
        {
            $("#region"+region[i]).toggle();
            $("#container").toggle(); //toggle off
        }
    }
   }); 
 });

minX、maxX 等数组中的坐标是按顺序排列的，因此这四个数组中的每个数组中的第一个元素属于第一个区域 (#region1）。我拥有 regionNumber 数组的原因是因为我对某些区域有多个“矩形”坐标集，因为这些区域不是完美的矩形。

正如我之前所说，当我单击某个区域时什么也不会发生。你明白这里的问题是什么吗？

Answer 1

哎呀！当我坐在这里盯着我的代码时，我意识到问题出在哪里。我忘了说 $("#region"+regionNumber[i]).toggle(); 而不是 $("#region"+region[i]).toggle();。

现在效果很好。谢谢大家的关注！