JQuery/JS Arrays - Looping Code Help

Question

Please see here for a question I recently asked. The only answer you should look at is the one that is selected as the best answer. Using the advice from that question, I made my code (in one section) much more concise by using arrays and loops. And it works!

I thought I should do the same for another section of my code, which sported similar code redundancies. However, after changing the code, it does not work.

Do you know what may be the problem?

$(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
      }
    }
    });
});

I'll go ahead and post the code that I previously had, which was functioning correctly. Please note that this code was within the same functions as the above code, though I did not repost the functions. Also, I did leave out some code (such as the variables that make up the first chunk of variables you see below) because they should not be relevant to the problem/solution.

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
} 

EDIT As previously stated, the new code I've tried with looping through arrays does not work. It will (usually) not recognize any clicks, hence not toggle. Sometimes, if I reload the page and click in region1 first, it will make the container div toggle off and the button toggle on, but the button will not recognize clicks, PLUS the region1 div was not toggled on.

Answer 1

A few thoughts, although you don't mention what "problem" you are having, other than "it does not work". The broken part may very well be a chunk of code you didn't post, specifically the part that gets your mouse coordinates. I don't see any code which sets areaX or areaY

1) Use else if you are using mutually exclusive areas. Once one region matches, there is no reason to check for the next one. You also only have to check the upper bound, as with an else you get the lower bound by default:

if (i = 0) {
    $("#region1").toggle(); //toggle on
} else if (i < 4) { // 1-3
    $("#region2").toggle(); //toggle on
} else if (i < 7) { // 4-6
   ...

2) However, instead of a big if/then/else, you can simplify greatly by doing an array lookup for your region:

$(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
            }
        }
    });
});

Without more of your code, I am unsure of what is wrong, but I slapped together a jsfiddle demo here that seems to work:

http://jsfiddle.net/jtbowden/3AWHZ/

I did a quick and dirty pageX/pageY to get the mouse coordinates, and made some other assumptions, but you can see that the regions toggle.