gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 22:35:07 24 4
gpt4 key购买 nike

请参阅 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 未打开。

最佳答案

一些想法,虽然你没有提到你有什么“问题”,除了“它不起作用”。 损坏的部分很可能是您没有发布的代码块,特别是获取鼠标坐标的部分。我没有看到任何设置 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 来获取鼠标坐标,并做了一些其他假设,但你可以看到区域切换。

关于javascript - JQuery/JS 数组 - 循环代码帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5466047/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com