jQuery圖像交換和動畫不起作用

Question

我正在嘗試進行簡單的圖像交換，但是當我為交換添加代碼時，它不起作用！ 我有一個功能，可以切換使用CSS設置動畫的不同類，該類在沒有圖像交換代碼的情況下也可以正常工作，但是一旦我添加了所有代碼，一切都會中斷！

有人可以快速對我的代碼進行問題排查嗎？ 我覺得我的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/

Answer 1

您遇到的問題是由於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();
});

希望對您有所幫助。

PS只是為了遵循傳統，這是一個有效的小提琴： jsfiddle.net/gKxLz

Answer 2

您是否在控制台中查找了錯誤？ `

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

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

Answer 3

如果不調試代碼，很難弄清正在發生什么。

我猜想問題可能是由於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);    

});

希望它能工作