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.

I should go ahead and mention that the reason I check for if(i > 0 && i < 4) // 1-3, etc. is because there is only one set of coordinates for the panhandle, 3 for region 2, 3 for region 3, etc. — Briz
– Briz, Commented Mar 28, 2011 at 23:05
areaX is assigned in the function; I did not post it to try to make the code a little shorter to read — Briz
– Briz, Commented Mar 28, 2011 at 23:09
Briz, that's not how this works. Do not post proprietary information to any public website, unless you intend to make it permanently public. Your proprietary information is still available in the edit history of this question, for accountability reasons, and cannot be touched by anyone. — Robert Harvey
– Robert Harvey, Commented Jul 25, 2011 at 19:54

Jeff B · Accepted Answer · 2011-03-28 23:55:22Z

2

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.

edited Mar 28, 2011 at 23:55

answered Mar 28, 2011 at 23:22

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Briz Over a year ago

Great suggestion in #2 for even more conciseness. I tried the else if suggestion and #2, but neither worked. I'll edit my original question to state how it is "not working"

Briz Over a year ago

After switching my code to model your #2, the divs will not toggle at all, but the page is reloading much faster when I refresh

Jeff B Over a year ago

I put a demo here: jsfiddle.net/jtbowden/3AWHZ This probably doesn't do what your code does, but it shows that the principle works.

Collectives™ on Stack Overflow

JQuery/JS Arrays - Looping Code Help

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related