JQuery / JS Arrays - Looping Code Help - PullRequest
Новая
       1

JQuery / JS Arrays - Looping Code Help

2 голосов
/ 29 марта 2011

Пожалуйста, посмотрите здесь для вопроса, который я недавно задал.Единственный ответ, который вы должны посмотреть, - это тот, который выбран лучшим.Используя советы из этого вопроса, я сделал свой код (в одном разделе) гораздо более кратким, используя массивы и циклы.И это работает!

Я подумал, что я должен сделать то же самое для другого раздела моего кода, который демонстрировал аналогичные избыточности кода.Однако после изменения кода он не работает.

Знаете, в чем может быть проблема? 

$(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 контейнера отключается, а кнопка включается, но кнопка не распознает щелчки, ПЛЮС div div1 не был включен.

1 Ответ

2 голосов
/ 29 марта 2011

Несколько мыслей, хотя вы не упоминаете, с какой «проблемой» вы столкнулись, кроме как «она не работает». Разбитая часть вполне может быть частью кода, который вы не опубликовали, в частности, частью, которая получает координаты вашей мыши. Я не вижу кода, который устанавливает 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/

Я сделал быструю и грязную страницу X / pageY, чтобы получить координаты мыши, и сделал некоторые другие предположения, но вы можете видеть, что области переключаются.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...