Question

我曾经有这样的事情：

$(function() {
$(".PortfolioFade img")
    .mouseover(function() { 
                    popup('PORTFOLIO');
                    var src = $(this).attr("src").replace("images/paperclip.png", "images/paperclip-black.png");
        $(this).attr("src", src);
    })
    .mouseout(function() {
                    ;
    });
    });

当我试图把它变成一个函数并调用它时，它根本不起作用。图像没有被替换。

以下是功能和后续调用无效，我不知道为什么它不起作用。

 $(document).ready(function() {
   // put all your jQuery goodness in here.
   $('body').hide().fadeIn(1000);

   //Changing Fonts
   function changeFont(element, fontFamily, fontSize)
{
    $(element).css("font-family", fontFamily);
    $(element).css("font-size", fontSize);
}
    function ImageRollover(image_element, popup_name, original, replacement)
{
    $(element)
        .mouseover(function(){
            popup(popup_name);
            var src = $(this).attr("src").replace(original,replacement);
            $(this).attr("src",src);

        })
        .mouseout(function(){
            ;
        });
}

$(function) {
   ImageRollover(".Portfolio img",'PORTFOLIO',"images/paperclip.png","images/paperclip-black.png");
});


 });

Answer 1

编辑：抱歉，我首先应该看到的是ImageRollover()函数声明了参数image_element，但随后在您使用的函数中element。所以在功能变化中：

$(element)
    .mouseover(function(){

要：

$(image_element)
    .mouseover(function(){

（忘记我之前说的话。）

~~您的原始版本有什么，但新版本不是文档就绪处理程序。尝试将文档中的ImageRollover函数调用准备好，如下所示：~~

$(function() { ImageRollover(".Portfolio img",'PORTFOLIO',"images/paperclip.png","images/paperclip-black.png"); });

您无法将事件处理程序附加到尚未解析的元素 - 在解析整个文档之前不会调用文档就绪处理程序，因此您可以附加事件处理程序。或者，您可以将脚本放在其操作的元素之后的某个位置，例如，在正文的末尾。

~~我倾向于将ImageRollover函数声明也准备好转移到文档中，只是为了使它远离全局命名空间（假设你只是从文档中调用它）虽然没有必要让它发挥作用。~~

调试：不会调用鼠标悬停功能

1 个答案: