Question

Sorry If this seems short/ un-researched (I’ve probably been looking in all the wrong places with the wrong logic in mind) but I feel like the answer is going to be simple/straight forward.

Say I have some variables set up, for example:

var path1 = paper.path("M 95, 259 L 110, 250... etc. etc.. ");

var path2 = paper.path("M 96 138 L 55, 100,... etc... etc..");

Insert them into a set…

var set1 = paper.set();
    set1.push(icon1, path1);

EDIT: These two steps x2 ^^^^^^^^^

Then want to go ahead and insert that new set into a new array with new objects with their own ids, So I can later reference that array when I set up a click handler function.

Basically is there any way I should/can go about attaching each set to this new array of new objects?

EDIT:

Here’s more specifically what I’m working with.. I created a for loop to run through that array… which works but it only displays the first switch DIV no matter which set is clicked. Instead I want to display switch2 when set2 is clicked… or even switch3 with set3.. etc. Thanks.

    switches = [
        { id: 'switch1', set: set1 },
        { id: 'switch2', set: set2 }

    ],
    current,
    max,
    i;


for (i = 0, max = switches.length; i < max; i++) {
    initSwitch(switches[i].set, switches[i].id);
}

function initSwitch(switchStr, targetId) {

        txElm = document.getElementById(targetId);

     var clickHandler2 = (function (e) {
         if (current) {
             if (current === txElm) {
                 return;
             }
             current.style.display = '';
         }
         current = txElm;
         current.style.display = 'block';
         //this.toFront();
         paper.safari();
    });

    set1.click( clickHandler2 );
    set2.click( clickHandler2 );

FINAL EDIT:

check out this jsfiddle I just wrote up. I want the first box and image to display the “switch1” Div and the second two boxes to display the “switch2” Divs.

http://jsfiddle.net/thecomplex/AEa2X/13/

Answer 1

var switches = [
        { id: 'switch1', set: set1 },
        { id: 'switch2', set: set2 }
];
var current;

for (var i = 0, max = switches.length; i < max; i++) {
    initSwitch(switches[i].set, switches[i].id);
}

function initSwitch(set, targetId) {
    var txElm = document.getElementById(targetId);

    set.click(function(e) {
        if(current == txElm)
            return;
        if(current)
             current.style.display = '';
        current = txElm;
        current.style.display = 'block';
        paper.safari();
    });
}