问jQuery图像交换和动画无法工作
EN

Stack Overflow用户

提问于 2014-01-20 10:16:18

回答 3查看 135关注 0票数 0

我试图做一个简单的图像交换，但当我添加我的代码为交换，它不工作！我有一个函数切换使用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/

html

css

jquery-animate

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-01-20 12:03:53

您所遇到的问题是jQuery imageSwap函数的语法问题，因为您不能编写两个用“逗号”分隔的函数。我认为一个可能的解决方案可能是删除第二个函数。另外，imageSwap函数不知道“这”，因为它超出了它的范围。你需要把“这”作为论据传递给它。因此，最终的imageSwap函数如下所示：

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

你对这个函数的调用就像：

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

我希望这会有所帮助。

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

票数 1

Stack Overflow用户

发布于 2014-01-20 10:28:12

你在控制台里查找错误了吗？

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

语法不正确:第二个函数没有变量名。

票数 0

Stack Overflow用户

发布于 2014-01-20 10:29:26

如果不调试代码，就很难搞清楚正在发生什么。

我猜想这个问题可能是由于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);    

});