jQuery:Lightbox关闭事件处理

时间:2016-06-11 22:09:50

标签: javascript jquery html javascript-events

我在页面上有一个简单的灯箱,其中关闭图标有一些类<!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize(){ var latitude; var longitude; var latDest; var longitudeDest; var mapProp = { center: new google.maps.LatLng(52.395715,4.888916), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); document.getElementById('submit').addEventListener('click', function() { latitude = document.getElementById('latitude').value; longitude = document.getElementById('longitude').value; latDest = document.getElementById('latDest').value; longitudeDest = document.getElementById('longitudeDest').value; }); var start = new google.maps.LatLng(latitude,logitude); var dest = new google.maps.LatLng(latDest,longitudeDest); var myTrip=[start,dest] var flightPath=new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 }); flightPath.setMap(map); } } google.maps.event.addDomListener(window, 'load', initialize) </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> <form> <label>Start Lattitude</label><input type = "text" name = "latitude"/> <br> <label>Start Longitude</label><input type = "text" name = "longitude"/><br> <label>Destination Latitude</label><input type = "text" name = "latDest"/><br> <label>Destination Longitude</label><input type = "text" name = "longitudeDest"/><br> <input type = "submit" name = "submit"> </form> </body> </html> 。当用户单击关闭图标时,我想将焦点移回链接元素,这会触发灯箱。

我尝试添加一些函数,该函数接受触发链接和结束图标类名称的输入。

.closeIt

对于每个灯箱,我手动调用该函数,如下所示:

 function focusBack(triggeringLinkId,closingLinkClass){
     $(closingLinkClass).click(function () {
        $(triggeringLinkId).focus();
     });
  }

如果我在页面上只有一个灯箱,这种方法可以正常工作,但如果我有多个灯箱,它会开始将它绑定到最后一个被调用的函数,现在无论我关闭什么灯箱,焦点都会回到触发状态我上次称为 focusBack('#someLink','.closeIt') 函数的链接。

处理这种情况的最佳方法是什么?

1 个答案:

答案 0 :(得分:0)

我已经用这个方法解决了这个问题:

function focusBack(triggeringLinkId,closingLinkClass){
$(triggeringLinkId).click(e){
   $(e.target).addClass('triggeringLinkClass');
}
 $(closingLinkClass).click(function () {
    $(triggeringLinkClass).focus();
    $(triggeringLinkClass).removeClass('triggeringLinkClass');
 });
}

我不认为这是最好的方法,但它解决了我的问题。