CODEWITHSUNDEEP
javascriptjquery
Matías Sanchez Moisés
Matías Sanchez Moisés

Reputation: 101

Use object with jQuery selector

I have this:

<div class="place pin-red-big" data-place-id="place72">b</div>
<script type="text/javascript">
    place72 = map.addMarker({
        lng: 10,
        lat: 10,
    });
    $('.place').mouseout(function(){
        $(this).data('place-id').setAnimation(null);
    });
    $('.place').mouseover(function(){
        $(this).data('place-id').setAnimation(google.maps.Animation.BOUNCE);
    });
</script>

I need to be able to use the functions of the object place72, like .setAnimation.

Upvotes: 1

Views: 121

Answers (4)

Hector Ordonez
Hector Ordonez

Reputation: 1104

If I understand you right, you want this...

var place72 = map.addMarker({
    lng: 10,
    lat: 10,
});
$('.place').mouseout(function(){
    place72.setAnimation(null);
});
$('.place').mouseover(function(){
    place72.setAnimation(google.maps.Animation.BOUNCE);
});

The explanation is that place72 is initialized with map.addMarker, and contains your object.

If setAnimation is an object public method of place72 , all you need is to request the method to place72.

To extend a bit this explanation, imagine an Object class called Foo. You initialized it (construct it, build it, instantiate it ) this way...

var foo = new Foo();

And now, the parameter foo its an instance of Foo.

So if Object class Foo has the public method Bar, you call it this way...

var foo = new Foo();
foo.Bar();

Notice that for static methods you would not request the method to the instance, but to the Object class itself. Like this;

var foo = new Foo();
foo.Bar();

Foo.staticBarExample();

And finally, let me tell you that this is JavaScript theory (Object Oriented), not JQuery :)

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

If you know your object is defined in which context you can simply get it like this:

var myOBJName= $(this).data('place-id');
var obj = mycontext[myOBJName];

know you can call the setAnimation function:

obj.setAnimation(/*...*/);

and it seems in your sample code window is the context object which your object is defined in it.

BUT what if your object is wrapped in another scope:

(function(){
    place72 = map.addMarker({
        lng: 10,
        lat: 10,
    });

    $('.place').mouseout(function(){
        //...
    });
    $('.place').mouseover(function(){
        //...
    });
})();

in these situations we usually are forced to use eval, whereas we know we better not use it:

(function(){
    place72 = map.addMarker({
        lng: 10,
        lat: 10,
    });

    $('.place').mouseout(function(){
        var myOBJName= $(this).data('place-id');
        //it would execute at the same context
        var obj = eval("_OBJ_="+myOBJName);
        obj.setAnimation(/*...*/);
    });
})();

Upvotes: 0

Conrad
Conrad

Reputation: 571

As far as I understand, you want to access the setAnimation()-method of the object stored in the variable place72. Your approach was to store the variable name into a custom data attribute and use that name to access the variable.

This kind of doesn't work in JavaScript, but there are several easy solutions to your problem.

1. Use the data-place-id-attribute as a dictionary key

For this approach to work, you need a dictionary object where to store your created objects.

var dictionary = {
    place72 = map.addMarker({ lng: 10, lat: 20 })
};

Having this, you can easily access your markers as follows:

var key = $(this).data('place-id');
dictionary[key].setAnimation(...);

2. Access global variables via the window object

You don't neccessarily need to create dictionary object in approach one on yourself, as all globals variables can be accessed through the window-object. So access can be achieved as simple as follows:

var key = $(this).data('place-id');
window[key].setAnimation(...);

From a code-design-point-of-view, this is not the best approach for medium-sized or even larger projects though.

3. Attach the desired object directly to the DOM

It is also possible to store your object in the DOM-node itself. As you're apparently using jQuery, you can make use of its data()-method:

$('[data-place-id="place72"]').data('place', map.addMarker(...));

Accessing the object is just as easy:

$(this).data('place').setAnimation(...);

This is by far my favourite solution. (;

Upvotes: 1

Ram
Ram

Reputation: 144739

The returned value doesn't refer to your variable, it's just a string, since the place72 is a global variable you can access it by using bracket notation:

window[$(this).data('place-id')].setAnimation(null);

You can also use an object:

var places = {
    place72: map.addMarker({
        lng: 10,
        lat: 10,
    }),
    placeN: '...'
};

places[this.dataset.placeId].setAnimation(google.maps.Animation.BOUNCE);

Upvotes: 0

Related Questions