javascript - jQuery图像交换和动画不起作用

我正在尝试做一个简单的图像交换，但是当我为交换添加代码时，它不起作用！我有一个功能，可以切换使用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/

最佳答案

您遇到的问题是由于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();
});

希望对您有所帮助。

附言只是为了遵循传统，这是一个有用的小提琴：
jsfiddle.net/gKxLz

关于javascript - jQuery图像交换和动画不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21241273/