Javascript If / Else語句更改img src

Question

我有一個功能下降的動態下拉菜單，我想添加一些功能。 菜單是頁面導航，懸停在鏈接上會更改內容區域中圖像的來源，反映活動鏈接。 這是一個簡單的attr（src）變化。

我添加了一些代碼來淡化活動圖像，將源更改回默認值，然后在退出菜單時將其淡化並返回，但是想在If / Else語句中構造該代碼; 如果圖像的源與默認值不變，則防止圖像淡出和重新進入。

語法似乎正確，但功能無法正常工作。 我比較新，很可能會遺漏一些東西。 我非常感謝任何有關功能，更可靠代碼的建議！

謝謝你的時間，丹尼爾

---

嵌入在else語句中的函數（淡出，更改源，淡入）按照我的意願工作。

$("#trigger").mouseleave(function(){
    var img = $("#img_home");
    if (img.src = "Images/IMG_4663_bw.jpg"){
      img.noop();
    } else {
      img.fadeOut(1000, function(){
         img.attr("src","Images/IMG_4663_bw.jpg");
         img.fadeIn(1000);
      });
    }
});

Answer 1

if (img.src = "Images/IMG_4663_bw.jpg")

您正在分配值，您需要==運算符，而不是=運算符。
如果您只是在尋找else條件，只需反轉條件：

if (img.attr('src') != "Images/IMG_4663_bw.jpg") {
    // fade and stuff
}

Answer 2

img是一個jQuery對象。
您需要通過調用img.attr('src')來訪問其屬性。

你的if條件賦予 img屬性; 要檢查是否相等，您需要使用== （相等）或=== （嚴格相等）運算符。

jQuery的noop方法是一種靜態方法; 你通過編寫jQuery.noop()調用它。

最后，根本不需要調用noop() 。 首先，一對沒有語句的空括號沒有錯： if (something) { } else { ... } 。
此外，你可以反轉if條件並擺脫else ：

if (img.attr("src") === "Images/IMG_4663_bw.jpg") {
  img.fadeOut(1000, function() {
     img.attr("src", "Images/IMG_4663_bw.jpg").fadeIn(1000);
  });
}

Answer 3

嘗試

$("#trigger").mouseleave(function(){
var img = $("#img_home"); 
 if (img.src == "Images/IMG_4663_bw.jpg"){
  img.noop(); 
 } 
 else {
  img.fadeOut(1000,function(){
  img.attr("src","Images/IMG_4663_bw.jpg");
  img.fadeIn(1000); 
  }); 
 } 
});

不同之處在於將該源與圖像路徑字符串進行比較。 它應該是'=='

Answer 4

語法不正確。 在if()語句中需要==而不是= ，它執行賦值而不是比較。

此外，為了直接訪問src屬性，您需要從DOM元素執行此操作。 您可以使用[0]從jQuery對象獲取第一個img 。

if (img[0].src == "Images/IMG_4663_bw.jpg"){
    $.noop(); // The noop is called from the global jQuery object.
    //...