OnmouseOver Jquery/Javascript调用外部函数

我可能在这里弄错了，但我认为内联html可以用onmouseover调用一个外部JavaScript文件的函数。OnmouseOver Jquery/Javascript调用外部函数

例如：

<a href="#" onmouseover="updateParentImage('<?php echo $this->getGalleryUrl($_image) ?>');">

而且我的外部的jQuery/javascript文件功能看起来像：

 function updateParentImage ($image_url) 
    { 
     alert($image_url); 
     $('.product-img-box .product-image img').attr('src', $image_url);  
    }

的功能从来没有运行。我完全错过了什么吗？即使认为javascript是外部的，该标签是否应该调用相应的文件？

注意：如果我包含JavaScript内联，警告框会显示，但我试图在文档中更改的图像不会更改，即使我在代码中使用与其他位置相同的引用成功地更新图像。

任何帮助，将不胜感激。谢谢！

来源

2011-07-18 Nathaniel Wendt

你确定你已经包含你的外部脚本文件到你的页面吗？看起来你已经包含了jQuery（至少你正在使用它），所以有没有一个原因，你为什么不绑定你的事件呢？ :) –

是的，外部文件的其他功能和方面适当地工作。我选择不绑定，所以我可以通过我想用PHP更新的图像的URL。如果我有一个绑定函数（这个代码将被添加到1到7个图像的任何地方），它会变得更加混乱，我不想编写重复的绑定函数 –

如何这样的事情...

<a href="#" class="imageChanger" data-imagesrc="<?php echo $this->getGalleryUrl($_image) ?>">

然后使用jQuery添加一个MouseEnter事件

$(document).ready(function(){ 
    $('.imageChanger').mouseenter(function(){ 
     alert($image_url); 
     $('.product-img-box .product-image img').attr('src', $(this).data('imagesrc')); 
    }); 
});

来源

2011-07-18 21:45:27

如果您要将自定义属性添加到您的HTML，至少使他们符合HTML5：'data-imgsrc =“...”' –

好点，更新，也改为使用鼠标事件，因为它似乎你不会需要鼠标移出。 –

是的！这正是我想要做的，但不知道我能做到。谢谢！我会看看现在是否适合我。 –

基于您的评论，我已经来到这个解决方案可以帮助你：

<a href="#" data-imageurl="<?php echo $this->getGalleryUrl($_image) ?>">This is one of many links</a>

然后你就可以有这样的脚本：

(function($) { 
    $(document).ready(function() { 
     $('a').hover(function() { 
      // this happens onmouseenter 
      var imageUrl = $(this).data('imageurl'); 
      updateParentImage(imageUrl); 
     }, function() { 
      //this happens onmouseleave 
     }); 
    }); 

    function updateParentImage(image_url) { 
     alert(image_url); 
     $('.product-img-box .product-image img').attr('src', $image_url); 
    } 
})(jQuery);

那小块代码绑定到所有的'a'元素，这可能不完全正确，但它只是作为一个例子。然后我将所有的代码封装在一个闭包/立即调用的函数表达式（IIFE）中，以确保我们不会太多地污染全局名称空间。它还确保$在该闭包中保留jQuery。

还有一点需要注意的是，我已经使用链接上的数据属性来存储该链接的图像URL。清洁和容易:)

如果您有任何问题，大声呼喊！

来源

2011-07-18 21:51:27

（见上述评论的上下文响应）

你不应该重复事件绑定，做内联，突兀的JavaScript中从来没有一个答案。

绑定一次，并将您的URL设置为可以抓取的属性。另外，我写的，你不想碰你的外部JS功能的假设下以下几点：

<div id="linkContainer"> 
    <a href="#" data-imgsrc="<?php echo $this->getGalleryUrl($_image) ?>">Something</a> 
</div>

JavaScript的（可以放置在网页的HTML脚本标记，如果你必须）：

$('#linkContainer a').bind('mouseover', function() { 
    updateParentImage($(this).data('imgsrc')); 
    return false; 
});

来源

2011-07-18 21:51:31

OnmouseOver Jquery/Javascript调用外部函数

回答

相关问题