Question

我不确定为什么这段代码无效。目标是在用户点击.accent时隐藏图片并在其位置显示另一个图片。当前显示的图像（在页面加载时显示）由类.ssi-hide引用。

这是jQuery：

    jQuery(document).ready(function($){
      // jQuery methods go here...

      var currentImage = '".ssi-hide"';

      $(".accent").click(function() {
         swapImage( currentImage, "#accent-img" );
      });
    }); //end jQuery

这是函数：

    (function( $ ) {
        $.fn.swapImage = function( outPic, inPic ) {
            $( outPic ).fadeOut(200, function(){
            $( inPic ).fadeIn(400).css("display", "block").css("margin", "auto");
            });
            currentImage = inPic;
        };
    })( jQuery );

Chrome正在通知：＆＃34;未捕获的ReferenceError：未定义swapImage＆＃34; 以及＆＃34;未捕获错误：语法错误，无法识别的表达式：＆＃34; .ssi-hide＆＃34;＆＃34;

非常感谢您的帮助。

Answer 1

首先，currentImage不需要两组引号，而是使用var currentImage = ".ssi-hide";。

您正在调用该函数，就好像它是一个范围函数，但它是一个jQuery插件。而不是：

$(".accent").click(function() {
    swapImage( currentImage, "#accent-img" );
});

它应该是：

$(".accent").click(function() {
    $(this).swapImage( currentImage, "#accent-img" );
});

但我不明白为什么你需要将它作为jQuery插件，因为它不会在任何地方使用this。

相反，它应该被定义为类函数

(function( $ ) {
    $.swapImage = function( outPic, inPic ) {
        $( outPic ).fadeOut(200, function(){
        $( inPic ).fadeIn(400).css("display", "block").css("margin", "auto");
        });
        currentImage = inPic;
    };
})( jQuery );

然后你打电话

$(".accent").click(function() {
    $.swapImage( currentImage, "#accent-img" );
});

Answer 2

使用onclick创建一个属性，其值应为字符串指的是一个函数，而不是一个实际的函数。使用click创建元素上的属性，其值应该是函数本身。

jQuery(document).ready(function($){
          // jQuery methods go here...

          var currentImage = $(".ssi-hide");

          $(".accent").on("click",function() {
             $(this).swapImage( currentImage, "#accent-img" );
          });
        }); //end jQuery

从.click（）内部调用jQuery函数

2 个答案: