代码建议 – 如何使更简洁(Javascript / Jquery)

我正在努力使我的代码更简洁(即重复代码更少).我已经从我的主管那里得到了一些关于如何使我最近的代码更简洁的建议,但我不确定如何做到这一点.

我有一些坐标用于检查用户是否在div的某个区域内单击.我被告知我应该将所有坐标放在一个数组中并“循环”以便在需要时获取它们.我想 – 我理解他的建议,但由于我还缺乏编程经验,所以我无法完全理解它.这是我到目前为止所做的工作,因此您可以更好地了解正在发生的事情：

    $("#div1").click(function(e)
    {
        // Arrays containing the x and y values of the rectangular area around a farm
        // [minX, maxX, minY, maxY]
        var div1_Coord_Area1= [565, 747, 310, 423];
        var div1_Coord_Area2= [755, 947, 601, 715];

        if(areaX >= Reg2_Coord_Farm1[0] && areaX <= Reg2_Coord_Farm1[1] && areaY >= Reg2_Coord_Farm1[2] && areaY <= Reg2_Coord_Farm1[3]) 
        {
            alert("You clicked in the first area");
        }
        if(areaX >= Reg2_Coord_Farm2[0] && areaX <= Reg2_Coord_Farm2[1] && areaY >= Reg2_Coord_Farm2[2] && areaY <= Reg2_Coord_Farm2[3]) 
        {
            alert("You clicked in the second area");
        } 
});

不要担心我如何进行计算;我把这个代码留在了方法之外,因为它基本上是无关紧要的,但是如果你想知道它就在那里.

我为每组坐标做了一个数组,然后简单地调用它们.然而,这并不是“遍历”一个充满了每个区域的所有坐标的巨大阵列.你能想出一种做到这一点的方法,或者是我现在能做的最好的方法吗？

解决方法:

我认为他的意思更像是这样的：

$("#div1").click(function(e){
    // Arrays containing the x and y values of the rectangular area around a farm
    // For each array: [area1, area2, area3, ... areaX]
    var minX = [565, 755];
    var maxX = [747, 947];
    var minY = [310, 601];
    var maxY = [423, 715];

    for (var i = 0; i < minX.length; i++) {
      if (areaX >= minX[i] && areaX <= maxX[i] && areaY >= minY[i] && areaY <= maxY[i]) {
        alert("You clicked in area " + (i+1));
      }
    }
});

这样,您可以检查更多区域,但永远不必更改循环,因为它将始终遍历数组中的所有项目,如上面的2,或10或100.

标签：mouseclick-event,javascript,jquery,arrays
来源： https://codeday.me/bug/20190903/1798240.html