РЕДАКТИРОВАТЬ Я понял, что случилось.Если вы хотите посмотреть, сможете ли вы найти его тоже, не стесняйтесь.В противном случае я разместил ответ в ответах.
Я продолжу и выложу весь код, так как я задавал этот вопрос раньше, но оставил вещи, которые, по моему мнению, были не нужны для поиска проблемы., но отвечающие хотели получить весь код.
Следующий код смоделирован после некоторого другого моего кода, который прекрасно работает, но в этом методе он не хочет работать.У меня есть начальный div с именем #container
, который является изображением карты Оклахомы, и на этом изображении вы видите различные сегменты состояния.В моем старом коде, когда пользователь щелкает в определенной области сегмента, он отключает #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
, заключается в том, что у меня есть несколько «прямоугольных» наборов координат для некоторых областей, потому что области не являются совершенно прямоугольными.
Как я уже говорил, ничего не происходит, когда ящелкните регион.Вы видите, в чем здесь проблема?