在jquery中初始化一次函數

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');
        }
    });
});

可能不是最干凈的解決方案，但我想它簡單快速

要么

你可以使用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);
    });
});