I have some icons that the user is picking with his mouse.

I have this series of icons where I can select and set their border. I am limiting the number of chosen icons to 5. The first selected would bee a yellow border one. The next 4 would be black border.

On document.ready, I do:

$('img.selectable').click(function(){ image_click(this); });

For the CSS:

.selectable {
    border: 3px solid #ebe6b3;
    float:left;
    margin:1px;
}

For the HTML:

<img class="selectable" src="img/first_icon.png">

I have this function:

function image_click(e)
{
    if($(e).data("clicked")=="yes")
    {
        images_selected--;
        $(e).data("clicked","no").css('border','3px solid ' + NEUTRAL_COLOR);
        if(images_selected==1)
        {
          $('img.selectable').not( e ).filter(function() {
                    return $( this ).data("clicked")=="yes";
                     }).css('border','3px solid ' + YELLOW_COLOR);

        }
    }
    else
    {
        if (images_selected<5)
        {
            images_selected++;
            if(images_selected==1)
            {
                $(e).data("clicked","yes").css('border','3px solid ' YELLOW_COLOR);
            }
            else
            {
                $(e).data("clicked","yes").css('border','3px solid ' + BLACK_COLOR);
            }
        }
    }
};

There has to be a first icon, which will be yellow all the time. I was thinking of doing it with an order array, which stores the order of the objects. The thing is I didn't seem to be able to call an object from the array and still preserve it's css function.

I was thinking of something like:

var x=[];

inside image_click(e){..

at some point I store the object:

    $(e).data("order",clicked_img);

    x[clicked_img]=e;

and when I pop it out:

    alert(x[clicked_img].data("order"));
...}

BUT.... Seems like I have no acces to the data anymore. Like when the object left the jQuery realm it has lost it's civil rights. I don't know how to access it's data variables.

Help please! Thanks!

I have some icons that the user is picking with his mouse.

I have this series of icons where I can select and set their border. I am limiting the number of chosen icons to 5. The first selected would bee a yellow border one. The next 4 would be black border.

On document.ready, I do:

$('img.selectable').click(function(){ image_click(this); });

For the CSS:

.selectable {
    border: 3px solid #ebe6b3;
    float:left;
    margin:1px;
}

For the HTML:

<img class="selectable" src="img/first_icon.png">

I have this function:

function image_click(e)
{
    if($(e).data("clicked")=="yes")
    {
        images_selected--;
        $(e).data("clicked","no").css('border','3px solid ' + NEUTRAL_COLOR);
        if(images_selected==1)
        {
          $('img.selectable').not( e ).filter(function() {
                    return $( this ).data("clicked")=="yes";
                     }).css('border','3px solid ' + YELLOW_COLOR);

        }
    }
    else
    {
        if (images_selected<5)
        {
            images_selected++;
            if(images_selected==1)
            {
                $(e).data("clicked","yes").css('border','3px solid ' YELLOW_COLOR);
            }
            else
            {
                $(e).data("clicked","yes").css('border','3px solid ' + BLACK_COLOR);
            }
        }
    }
};

There has to be a first icon, which will be yellow all the time. I was thinking of doing it with an order array, which stores the order of the objects. The thing is I didn't seem to be able to call an object from the array and still preserve it's css function.

I was thinking of something like:

var x=[];

inside image_click(e){..

at some point I store the object:

    $(e).data("order",clicked_img);

    x[clicked_img]=e;

and when I pop it out:

    alert(x[clicked_img].data("order"));
...}

BUT.... Seems like I have no acces to the data anymore. Like when the object left the jQuery realm it has lost it's civil rights. I don't know how to access it's data variables.

Help please! Thanks!

• javascript
• jquery
• object
• save

2 Answers 2

You saved the DOM element, not the jQuery object. It should be

x[clicked_img]=$(e);

not

x[clicked_img]=e;

Like when the object left the jQuery realm it has lost it's civil rights.

Simple solution: put it back in the jQuery realm. You have a couple options:

x[clicked_img] = $(e);
// ...
alert(x[clicked_img].data("order"));

or:

x[clicked_img] = e;
// ...
alert($(x[clicked_img]).data("order"));

or:

x[clicked_img] = e; // assuming e is the DOM element, not the event
// ...
alert(x[clicked_img].dataset.order);

The latter is not remended for now as I'm unsure of the cross-browser implications, but in any case, that's how you do it in "regular" JavaScript.

I'd suggest the first method, in which case you should also be assigning $(e) to a variable at the beginning of image_click so it doesn't rebuild the jQuery object every time.