jQuery圖像交換和動畫不工作

我想做一個簡單的圖像交換，但是當我添加在我的交換代碼，它不工作！我有一個函數切換不同的類，這些類是使用CSS工作正常，但沒有圖像交換代碼，但一旦我將它添加到它的所有休息！jQuery圖像交換和動畫不工作

能否真的很快排除我的代碼？我覺得我的JQuery邏輯有點偏離。

jQuery(document).ready(function() { 

var toggle = 0; 

var toggleClass = function() { 
    toggle = !toggle; 
    $(".two").toggleClass("two-menu", toggle); 
    $(".four").toggleClass("four-menu", toggle); 
    $(".images").toggleClass("images-menu", toggle); 
    $(".home").toggleClass("home-menu", toggle); 

    $("#bottom-left").toggleClass("bottom-left", !toggle); 
    $("#bottom-right").toggleClass("bottom-right", !toggle); 
    $("#margin-zero").toggleClass("margin-zero", !toggle); 

    $(".left-container").toggleClass("left-container-show", toggle); 
    $(".right-container").toggleClass("right-container-show", toggle); 
} 

var imageSwap = function() { 
     this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function() { 
    this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

jQuery(".home").click(function() { 

    toggleClass(); 

}); 

jQuery(".two").click(function() { 

    toggleClass(); 
    imageSwap();  

}); 

jQuery(".four").click(function() { 
    toggleClass(); 

}); 

});

我創建了兩個JSFiddles。

1）第一個不起作用，並且包含imageSwap函數。 http://jsfiddle.net/MuQ2w/

2）第二個沒有imageSwap，並且完美地工作。 http://jsfiddle.net/E2Rzv/

來源

2014-01-20 pappy

請發佈此代碼的jsfiddle – Shiva

完成。 http://jsfiddle.net/MuQ2w/ – pappy

您所遇到的問題是因爲你的jQuery語法imageSwap功能，因爲您不能使用「逗號」分隔兩個函數。我認爲可能的解決方案可能是刪除第二個功能。此外imageSwap函數不知道'this'，因爲它超出了範圍。您需要將「this」作爲參數傳遞給它。所以最終的imageSwap功能將類似於：

var imageSwap = function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
}

，您的電話本功能將是這樣的：

jQuery(".two").click(function() { 
    imageSwap(this);  
    toggleClass(); 
});

我希望這將有助於。

P.S.只要遵循傳統，這裏是一個工作小提琴： jsfiddle.net/gKxLz

來源

2014-01-20 20:03:53 Prateek

太棒了！非常感謝。 – pappy

你看起來在你的控制檯的錯誤？ `

var imageSwap = function() { 
     this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function() { 
    this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
}

是不正確的語法：第二個函數沒有變量名

來源

2014-01-20 18:28:12

這是很難搞清楚什麼是沒有調試代碼發生。

我猜測，也許問題是由於imageSwap函數中「this」的範圍。

試圖通過這個（用於處理），以imageSwap函數作爲參數，如：

var imageSwap = function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Twitter.jpg'; 
    }, function ($this) { 
    $this.src = '/wp-content/uploads/2013/11/Facebook.jpg'; 
} 

jQuery(".two").click(function() { 
    toggleClass(); 
    imageSwap(this, this);  

});

希望它會工作

來源

2014-01-20 18:29:26 jvicab

jQuery圖像交換和動畫不工作

回答

相關問題