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調用外部函數

回答

相關問題