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();
});

我希望它会有所帮助。

P.S。只是为了遵循传统，这里有一个工作小提琴： 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

如果不调试代码，很难弄清楚发生了什么。

我猜这个问题可能是由于＆＃34;这个＆＃34;里面的imageSwap函数。

尝试将此（对于处理程序）传递给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);    

});

希望它能运作

jQuery图像交换和动画不工作

3 个答案: