Question

我有这个：

<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>

我需要能够使用对象place72的功能，如.setAnimation。

Answer 1

据我了解，您希望访问存储在变量setAnimation()中的对象的place72 - 方法。您的方法是将变量名称存储到自定义数据属性中，并使用该名称来访问变量。

这种方法在JavaScript中不起作用，但有几种简单的解决方案可以解决您的问题。

<强> 1。使用data-place-id - 属性作为字典键

要使这种方法起作用，您需要一个字典对象来存储您创建的对象。

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

有了这个，您可以按如下方式轻松访问您的标记：

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

<强> 2。通过窗口对象访问全局变量

您不必在自己的方法中创建字典对象，因为所有全局变量都可以通过window - 对象访问。因此，访问可以简单地实现如下：

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

从代码设计的角度来看，这不是中型或大型项目的最佳方法。

第3。将所需对象直接附加到DOM

也可以将对象存储在DOM节点本身中。当你显然使用jQuery时，你可以使用它的data() - 方法：

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

访问对象同样简单：

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

这是迄今为止我最喜欢的解决方案。（;

Answer 2

返回的值不是指您的变量，它只是一个字符串，因为place72是一个全局变量，您可以使用括号表示法访问它：

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

您还可以使用对象：

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

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

Answer 3

如果我理解你，你想要这个......

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

解释是place72是用map.addMarker初始化的，并包含你的对象。

如果setAnimation是place72的对象公共方法，您只需要请求方法72。

为了扩展这个解释，想象一个名为Foo的Object类。你用这种方式初始化它（构造它，构建它，实例化它）......

var foo = new Foo();

现在，参数foo是它的一个Foo实例。

因此，如果Object类Foo具有公共方法Bar，您可以这样调用它......

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

请注意，对于静态方法，您不会向实例请求方法，而是向Object类本身请求。像这样;

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

Foo.staticBarExample();

最后，让我告诉你这是JavaScript理论（面向对象），而不是JQuery：）

Answer 4

如果你知道你的对象是在哪个上下文中定义的，你可以简单地得到它：

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

知道你可以调用setAnimation函数：

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

在您的示例代码window中似乎是您的对象在其中定义的上下文对象。

但如果您的对象包装在另一个范围内该怎么办：

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

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

在这些情况下，我们通常被迫使用eval，而我们知道最好不要使用它：

(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(/*...*/);
    });
})();

使用jQuery选择器的对象

4 个答案: