代码＃1

 mapLoading.style.display = "block";

完整的功能显示在这个问题的底部。

我还有以下jQuery代码，当使用鼠标悬停元素时附加CSS类.weareloading，然后在CSS3动画（rotate和fadeIn）完成后删除类.weareloading。

代码＃2

$("#mapLoading").hover(function(){
  $(this).addClass("weareloading");})
$("#mapLoading").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("weareloading")  
})

我想做的事情以及这个问题的原因如下：

在Javascript函数中将代码＃1 替换为代码＃2
删除代码＃2 中的鼠标悬停要求，以便下面显示的函数只添加类.weareloading，然后在动画完成后删除类.weareloading。< / LI>

不幸的是，整个程序很复杂并且包含很多文件，因此我无法在jsFiddle上提供实时示例。但是，这里是上面提到的Javascript函数，它应该为这个问题提供足够的上下文：

第2行包含代码＃1

function doSearch(keyword, type) {
 mapLoading.style.display = "block";
  currentCategory = type;
  var icon;

        if (markerGroups[type]) {

        for (var i = 0; i < markerGroups[type].length; i++) {
          markerGroups[type][i].setMap(null);
        }
        markerGroups[type].length = 0;
        }


  if (keyword.substr(0,3) == "db:"){ 
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var swLat = southWest.lat();
  var swLng = southWest.lng();
  var neLat = northEast.lat();
  var neLng = northEast.lng();
  var dbCat = keyword.substr(3);

  var filename = dbPath + "db.php?cat="+ dbCat + "&swLat="+ swLat + "&swLng="+ swLng + "&neLat="+ neLat + "&neLng="+ neLng + "&extendLat="+ extendLat + "&extendLng="+ extendLng;
    $.getJSON(filename, function(data) {
   var hider = document.getElementById(type).getAttribute("caption");
    if (hider != "hidden") {
        for (i = 0; i < data.results.length; i++) {
            var result = data.results[i];
                if (result.icon === "" ) {
                    icon = type;
                } else {
                    icon = result.icon;
                }
            cleanHTML = html_entity_decode(result.html);
            var xmlHTML = createXmlHTML(result.address, result.name, cleanHTML, result.url, result.geometry.location.lat, result.geometry.location.lng);
            var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
            createMarker(latlng, i, xmlHTML, type, icon, "db", result.name);
      }
  }
     mapLoading.style.display = "none";
});

  } else {
                var hider = document.getElementById(type).getAttribute("caption");
                if (type == "user") {
                var userName = document.getElementById(type).getAttribute("name");
                    if (userName === null) {
                            hider = "hidden";
                    } else {
                        keyword = "establishment";
                        searchName = userName;
                    }
                }
                if (hider != "hidden") {
                var searchName = document.getElementById(type).getAttribute("name");
                if (searchName === null){
                    searchName = "";
                } else {
                    searchName = "&name=" + searchName;
                }
                    var ctr = map.getCenter();
                    //alert("Center: " + ctr)
                    var jsonLAT = ctr.lat();
                    var jsonLNG = ctr.lng();
                    if (autoRadius === true){
                        searchRadius = distance( map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lat(), map.getBounds().getSouthWest().lng());
                    }
                    var JSON = dbPath + "jsonproxy.php?url=" + encodeURIComponent("https://maps.googleapis.com/maps/api/place/search/json?location=" + jsonLAT + "," + jsonLNG + "&radius=" + searchRadius + "&types=" + keyword + searchName + "&sensor=false");
                    $.getJSON(JSON, function(data) {
                            for (i = 0; i < data.results.length; i++) {
                              var result = data.results[i];
                              var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
                              var resultHTML = "api:" + result.reference;
                              createMarker(latlng, i, resultHTML, type, type, "api", result.name, result.icon);
                              if (hider == "hidden") {
                                markerGroups[type][i].hide();
                              }
                            }
                               mapLoading.style.display = "none";
                    });
                }
  }
  return 1;
}

Answer 1

第一部分很简单，将函数的第2行更改为：

$("#mapLoading").addClass("weareloading");

我看不到你的功能在哪里做动画，所以我不知道在哪里删除这个类。如果你正在使用jQuery动画函数，它们应该有一个在动画完成时调用的回调。在这个回调函数中，输入：

$("#mapLoading").removeClass("weareloading");

顺便说一下，既然你正在使用jQuery，那你为什么要拥有那些冗长的原始JavaScript呢？例如。原因如下：

document.getElementById(type).getAttribute("caption");

可能是：

$('#'+type).attr("caption");

Javascript用jQuery函数替换函数

代码＃1

代码＃2

1 个答案: