圖像src交換停止工作（jQuery的WP）

Question

我有一個畫廊停止工作的新問題。我知道有關於attr（'src'）的問題，我認爲這是無關緊要的，因爲它至少在2年內運行良好。

背景

我建了一個網站早在2013即包括jQuery的（1.8）中運行的圖片庫 - 網站本身是WordPress的。

我們把網站交給客戶端，他們要管理更新等等。不用說，他們對保持WP是最新的並且幾個星期前他們從3.x更新到當前版本是不好的。有一些小小的打嗝，但都是固定的 - 或者我們認爲。上週他們注意到畫廊沒有工作。我知道超出一個疑惑，大概一年前這個工作正常 - 我爲他們移動了主機，但現在圖像交換不能使用jquery（見下面的代碼）。無可否認，在過去的18個月裏，我一直沒有使用過jQuery或WP，但是從我所能告訴的jQuery代碼是否正確。在wim上，我將WP 1.8換成了WP 2.X，但它仍然不起作用。我的直覺告訴WP更新是問題，但我不知道爲什麼。

我不確定這是否是一個WP問題，也許是一個腳本（不是專家）。

我會將所有圖像加載到瀏覽器中，以便它們被預加載以進行交換。

控制檯根本沒有發生任何錯誤。

它是如何工作

我裝載兩個圖像版本拇指和完整大小的圖片。我在加載時使用css隱藏圖像。當用戶點擊拇指時，我使用圖像的WP ID將兩者聯繫在一起（通過將其作爲DOM id的一部分）。單擊時，wp id將被傳遞給一個函數，該函數將獲取所有全尺寸圖像細節，然後刷新主圖庫。

TLDR

用來在畫廊換出圖片下面的代碼，用戶一週左右恢復更新WP，他們注意到它停止工作。我不確定WP更新是否是問題，因爲腳本的所有其他部分都可以正常工作。

//main js object 
var ae = { 
    switch_photo:function(pid) // method called from jq events 
    { 
     // pid - is the wp id that is shared between the gallery images and the thumbnails 

       // is this a video or image gallery? (video galleries still work fine) 
       var gal_type = $("#gallery-main-thumbs").data("galt"); 

       if(gal_type == "image") 
       { 

        // there are two versions of each image loaded, the thumbnail and the full sized 
        // full sized images are loaded then hidden with css so the image is available to be swapped. 
        // both images have id's that include the wp post id (the pid argument) - taht is how they are kept together 
        // the var declarations below use this shared wp-id to get the attributes from the full sized image 
        var alt = $("#display_"+pid).attr("alt"); 
        var bgcolor = "#fff"; 
        var src = $("#display_"+pid).attr("src"); 
        var w = $("#display_"+pid).attr("width"); 
        var h = $("#display_"+pid).attr("height"); 

        // if the image is portrait set the bg to black for appearence's sake 
        if (parseInt(w) <= 670) 
        { 
         bgcolor = "#000"; 
        } 

       // shows the src url of the full sized which is valid. 
       console.log(src) 

       // switch the bg color based upon image dimensions 
       $("#gallery-focus").css("background-color", bgcolor); 

       //swap out the main image - everything works except the src. 
       $("#main-photo").attr("src", src); 
       $("#main-photo").attr("width", w); 
       $("#main-photo").attr("height", h); 

       } 
       else 
       { 
        //video galleries - working fine. 
        var alt = $("#image_"+pid).children("img").attr("alt"); 
        $("#gallery-focus").html($("#embed_"+pid).html()); 
       } 

       $("#main-caption").text(alt); 
    } 
} 

Answer 1

發現問題...默認情況下wp更新是爲響應式圖像添加srcset屬性到wp圖像標籤。我在我的功能中禁用了此功能（網站無響應於2013年初12年初建立）：

function disable_srcset($sources) { 
return false; 
} 
add_filter('wp_calculate_image_srcset', 'disable_srcset'); 

這解決了我的問題。

Answer 2

如果這是您使用的是真正的代碼，第一console.log(src)之後添加;，其次你alt定義了兩次。將var alt;置於if條件之外，然後在else語句中的if和alt = $("#image_"+pid).children("img").attr("alt");中將其設置爲alt = $("#display_"+pid).attr("alt");。 bgcolor也是如此。而且你在對象定義ae = {...};的末尾缺少分號。

var ae = { 
    // method called from jq events 
    switch_photo: function(pid) { 
     // pid - is the wp id that is shared between the gallery images and the thumbnails 

     // is this a video or image gallery? (video galleries still work fine) 
     var gal_type = $("#gallery-main-thumbs").data("galt"); 
     var alt, bgcolor; 

     if(gal_type == "image") { 

      // there are two versions of each image loaded, the thumbnail and the full sized 
      // full sized images are loaded then hidden with css so the image is available to be swapped. 
      // both images have id's that include the wp post id (the pid argument) - taht is how they are kept together 
      // the var declarations below use this shared wp-id to get the attributes from the full sized image 
      alt = $("#display_"+pid).attr("alt"); 
      var src = $("#display_"+pid).attr("src"); 
      var w = $("#display_"+pid).attr("width"); 
      var h = $("#display_"+pid).attr("height"); 

      // if the image is portrait set the bg to black for appearence's sake 
      if (parseInt(w) <= 670) { 
       bgcolor = "#000"; 
      } else{ 
       bgcolor = "#fff"; 
      } 

      // shows the src url of the full sized which is valid. 
      console.log(src); 

      // switch the bg color based upon image dimensions 
      $("#gallery-focus").css("background-color", bgcolor); 

      //swap out the main image - everything works except the src. 
      $("#main-photo").attr("src", src); 
      $("#main-photo").attr("width", w); 
      $("#main-photo").attr("height", h); 
     } else { 
      //video galleries - working fine. 
      alt = $("#image_"+pid).children("img").attr("alt"); 
      $("#gallery-focus").html($("#embed_"+pid).html()); 
     } 

     $("#main-caption").text(alt); 
    } 
}; 

除此之外，我沒有看到任何代碼錯誤。你有任何控制檯錯誤？