Javascript 用 jQuery 函数替换函数

Posted 2023-02-22

【中文标题】Javascript 用 jQuery 函数替换函数

【英文标题】：Javascript Replace Function with jQuery Function

【发布时间】：2012-12-10 04:23:34

【问题描述】：

我有一个 javascript 函数，当被调用时，它会显示 CSS div #mapLoading 并附加样式 display:block。完成这个动作的代码行如下：

代码 #1

 mapLoading.style.display = "block";

整个函数显示在这个问题的底部。

---

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

代码 #2

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

---

我想做的——以及提出这个问题的原因——如下：

将 Javascript 函数中的

Code #1

替换为

Code #2

删除

代码#2

中的鼠标悬停要求，以便下面显示的函数简单地添加类.weareloading，然后在动画完成后删除类.weareloading。

不幸的是，整个程序很复杂，包含很多文件，所以我无法在 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;

【参考方案1】：

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

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

我看不到您在函数中的哪个位置制作动画，所以我不确定在哪里删除该类。如果你使用 jQuery 动画函数，它们应该有一个回调，当动画完成时会被调用。在这个回调函数中，放：

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

顺便说一句，既然您使用的是 jQuery，为什么还要使用这么冗长的原始 JavaScript？例如。为什么：

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

什么时候可以：

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

【讨论】：

完美运行 - 非常感谢您的回答。所有原始 Javascript 的原因是我正在慢慢地将整个程序转换为使用 jQuery 编码，但同时我也必须学习 jQuery。在这部分有点挂断，所以再次感谢您的回答！