I need to change this function and make it "bigger." How?

Head out to http://brucegust.com/portfolio/verizon/index_static.php#

If you look at the screen shot, you'll see what the user gets when they click on the "14" to the right of the month of July as it's listed on the right hand side.

screenshot
When you click on Florida, all of the states represented on the calendar are hidden except for Florida using this script:

function Florida()
{
$(".Alabama,.Mississippi,.Tennessee").hide();
$(".Florida").show();
return true;
}

If I wanted to change that functionality so my user could click on Florida and then click on another state, rather than all of the states disappearing save the one that was just selected, I need to make it where they would see what they clicked on AS WELL AS the one they had chosen previously. I'll need a reset button as well, but the bottom line is I need to create a script that has the ability to each state one layer at a time without eliminating the one(s) that had been chose previously.

How?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
Try:
var queue={};
function Florida()
{
    queue.Florida=true;
    $(".Alabama,.Mississippi,.Tennessee").hide();

    for( var state in queue)
    {
       $("." + state).show();
    }
return true;
}

function Mississippi()
{
    queue.Mississippi=true;

    $(".Alabama,.Florida,.Tennessee").hide();

    for( var state in queue)
    {
       $("." + state).show();
    }
return true;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor Commented:
hielo, I hope that those who employ you appreciate all that you bring to the table!

Your solution works perfectly. I would love to understand WHY it works.

You begin by establishing a variable "queue" (var queue={}) or that an array?

And then in your for loop, I'm accustomed to seeing some like for ($i=1; $i<=9; $i++;). That being the case, "state" confuses me.

You've got the points, friend, but could you provide a brief explanation as to why your code works? I like to avoid simply copying and pasting when there's something present that I need and want to learn.

Thanks so much!
hieloCommented:
>> You begin by establishing a variable "queue" (var queue={}) or that an array?
queue = {}; // this is an "object literal"

In javascript, these are interchangeable:
var x = new Object();
var x = {};//this is using an "object literal notation"

In the same sense that these are interchangeable:
var x = new Array();
var x =[]; //this is using "literal array notation"

>> I'm accustomed to seeing some like for ($i=1; $i<=9; $i++;)
The "traditional" for-construct is used with arrays.  An object (like queue above), is similar to an array in that it can hold multiple values -- meaning both objects and arrays are a "collection" of things.  To access the elements within an array, you use a numeric index - starting from zero and incrementing by one.  With an object however, the "keys/indeces" are typically strings --ex:

 //after this line, is an object, but has no items, just like y=[] is an array, but has no items
var x={};

//now let's add something to it using the "dot notation"
x.firstName="bruce";

// now let's add another "thing" using "array notation"
x["lastName"]="gust";  /* I know! but it is NOT an array; it's an object, but you can access its elements with a similar syntax as an array.  Just use quotes around the key/index because these are string keys, not numeric keys(like the array) */

// there is no "age" specified, so you should see undefined
alert(x.age);

Then to iterate over an object you use the "for-in" construct.  You should be able to find documentation on it online:
for( var property in x)
{  //initially, property get the value "firstName"
    alert( property +" = "+ x[property];/* this is where the array notation comes in handy.  Don't use quotes within the brackets so that property is "dereferenced"  -- meaning its value will be used as the key.  Since the value is "firstName", you are essentially saying  alert( x["firstName"] ); */
}

Open in new window

As for the solution, all I did was to add the state name as the "key" to the object and set its value to true so that it comes into existence once.  No need to put multiple instances of "Florida" in an array (for instance if you click it multiple times) and then search through it.  I hope that helps.

Regards,
Hielo
Bruce GustPHP DeveloperAuthor Commented:
hielo, you're a rock star!

Thanks!

BTW: If you want to weigh in on http://www.experts-exchange.com/questions/28699805/How-do-I-keep-these-two-scripts-from-stepping-on-one-another.html, I would appreciate it.

Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.