Question

我有fancybox调用的div

这是代码

 <div class="name"><%= popup_ajax hotel.name, hotel_info_path(hotel) %></div>

打开fancybox

以下是编译后的样子

<div class="name"><a class=" fancybox" data-type="ajax" data-src="/hotel_info/72721" data-options="{&quot;touch&quot;:false,&quot;baseClass&quot;:null}" href="javascript:;">Ibis London Thurrock M25</a></div>

我需要点击<div class="name">

打开它并在div中显示地图

我能够像这样做

$(".name").click(function(){
     $.fancybox.open($("a.fancybox"),{
      afterLoad: function(){
       lat = $(".hotel_info").data('hotel-lat');
       lng = $(".hotel_info").data('hotel-lng');
        myLatlng = new mapboxgl.LngLat(lng,lat);
        mapboxgl.accessToken = token;
        let map = new mapboxgl.Map({
           container: 'map-canvas-info',
           style: 'mapbox://styles/mapbox/streets-v9',
           center: myLatlng,
           zoom: 14
     });
     map.addControl(new mapboxgl.NavigationControl());
     let marker = new mapboxgl.Marker()
     .setLngLat(myLatlng)
     .addTo(map);
    }
    });
});

但它打开了两次fancybox。我怎么解决这个问题？

Answer 1

为什么要创建锚元素？这样的事情会简单得多 -

HTML

<div class="name">Ibis London Thurrock M25</div>

JS

$(".name").click(function(){
  $.fancybox.open({
    src  : 'https://codepen.io/fancyapps/pen/oBgoqB.html',
    type : 'ajax',
    opts : {
      touch : false,
      afterLoad: function(){
        alert("Opened");
      }
    }
  });
});

样本 https://codepen.io/anon/pen/BVRJdE?editors=1010

Fancybox打开两次

1 个答案: