在 OnClick 中更改鼠标退出事件参数

Question

>我有这样的html结构

<tr>
<td valign="top">   <div class="thumbnails">  <a id="1" href="#">
<img alt="ebony" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="2" href="#" class="selected">
<img alt="iceglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="3" href="#">
<img alt="glimmerglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="4" href="#">
<img alt="purpleglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="5" href="#">
<img alt="shorestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="6" href="#">
<img alt="lavastone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="7" href="#">
<img alt="moonstone/dark" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="8" href="#">
<img alt="moonstone/pale" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg"></a></div></td>
<td valign="top">   <div class="thumbnails">  <a id="9" href="#">
<img alt="pebblestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg"></a></div></td>
</tr>

并且我添加了一个编码来更改鼠标悬停时的图像

function swap_image( event, image_url ) {
   var e = event || window.event;
   if( e.target )
     var node = e.target;
   else
     var node = e.srcElement;
   if( node )
     if( node.tagName == "IMG" ){    
      node.src = image_url;
      }
   else{
      node.getElementsByTagName("img")[0].src = image_url;
      }    
   return false;
}

我想显示为我想更改鼠标退出功能参数选择的图像。 一切都工作正常，但鼠标退出函数参数没有改变

jQuery(".thumbnails a").live('click' ,function(){
    var selectedclass = jQuery('#portfolio tr td .thumbnails a').hasClass('selected');
    //alert(selectedclass);
    if(selectedclass)
    {
        var small_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel2');
        var big_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel1');
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('src',small_img);
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseover',swap_image( 'event',big_img));
        jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseout',swap_image( 'event',small_img));
        jQuery('#portfolio tr td .thumbnails .selected').removeClass('selected');
    }

    var img_url = jQuery(this).find('img').attr('rel1');
    jQuery(this).find('img').attr('src',img_url);
    jQuery(this).find('img').bind('onmouseout',swap_image( 'event',img_url));
    jQuery(this).addClass('selected');
    id = jQuery(this).attr("id");               
    jQuery("#large-img img").hide();
    jQuery('#large_'+id).show(); 
});

Answer 1

http://api.jquery.com/mouseout/可能是你要找的

$('#outer').mouseout(function() {
   //functions goes here
});

outer 将是要将事件绑定到的元素的 ID。

Answer 2

jQuery(this).find('img').attr('onmouseout',"swap_image( event,'"+org_url+"')");

这行不通。不能将 JavaScript 事件设置为属性。

您要做的是使用"绑定"将事件绑定到元素。所以你应该把它重写为：

jQuery(this).find('img').bind('onmouseout',function(){
   swap_image(event, org_url);
});

（抱歉，我现在不在 javascript 可测试环境中，它可能有一个小的语法错误。但这将是基本思想）