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

【问题标题】：What is wrong with this JS/Jquery method? (Arrays, click-event)这个 JS/Jquery 方法有什么问题？（数组，点击事件）
【发布时间】：2011-03-29 13:25:36
【问题描述】：

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

我将继续发布所有代码，因为我之前已经问过这个问题，但我认为对查找问题没有必要，但回答者想要所有代码。

以下代码仿照我的一些其他代码完美运行，但在这种方法中它不想工作。我有一个名为 #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 数组的原因是因为我有多个区域的“矩形”坐标集，因为这些区域不是完美的矩形。

正如我之前所说，当我单击一个区域时不会发生任何事情。你知道这里有什么问题吗？

【问题讨论】：

你做过调试吗？你能判断出处理程序是否被调用了吗？

标签： javascript arrays mouseclick-event jquery

【解决方案1】：

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

现在它工作得很好。感谢大家观看！

【讨论】：