Question

我在一个网页中有多个谷歌地图，如下所示

<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>
<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>
<div class="map_wrapper">
    <div class="map_heading"><h2>Map1</h2><a href="#" class="map_link">Map Show</a></div>
    <div class="map_canvas">map parameters goes here</div>
</div>

我正在使用谷歌地图v3，地图功能运作良好，我有功能maps_init();

所以我使用jquery

以这种方式

$(document).ready(function(){
$(".map_link").click(function(){
        $(this).parent().parent().children(".map_canvas").slideToggle(100);
        var map = $(this).parent().parent().children(".map_canvas");
        maps_init(map);
    });
});

当我点击链接然后它调用该函数然后再也不再调用该函数时，我怎么能使这个工作，因为用户可以点击"map_link"多次看到它并且每次初始化函数，所以我需要每个div "map_wrapper"中的引用，它将自己检查。如果没有初始化，那么它将初始化，否则不会，我不能在map_init()中的document.ready()函数中使用，因为它初始化所有地图和地图看起来不正确。

谢谢！

Answer 1

您可以添加一个类来跟踪初始化的地图：

$(".map_link").click(function(){
        if(!($(this).hasClass('initialized')) {
            $(this).parent().parent().children(".map_canvas").slideToggle(100);
            var map = $(this).parent().parent().children(".map_canvas");
            maps_init(map);
            $(this).addClass('initialized');
        }
    });
});

可能不是最干净的解决方案，但我想它简单快速

OR

你可以使用jQuery的“one”方法，它只会触发一次：

http://jsfiddle.net/jonigiuro/WQPjn/

$('a').one('click', function(e) {
    alert('map initialized');
    e.preventDefault();
});

在你的情况下：

$(document).ready(function(){
$(".map_link").one('click',function(){
        $(this).parent().parent().children(".map_canvas").slideToggle(100);
        var map = $(this).parent().parent().children(".map_canvas");
        maps_init(map);
    });
});

在jquery中初始化一次函数

1 个答案: