将事件处理程序分配给元素集合

Question

我想对鼠标输入的一个div起作用。 我的jquery & html在下面，但它总是第一个效果。

网站链接： http://mcr.tw/stu/gjun/millie/out/tsutaya/movies/test.html

我的jQuery：

$(document).ready(function(e) 
{ 
var array=["ic_evaluation_type_b26.png"] 
var imgno=0 

var array2=["ic_forbid_off.png"] 
var imgno2=0 

for (i = 0; i < 10; i++) 
{ 
    $(".itemEvaluation .a:eq(" + i + ")").bind("mouseenter", {id: i}, fn) 
    $(".a:eq(" + i + ")").bind("click", {id: i}, fnimgno) 
} 

function fn(e) 
{ 
    no = e.data.id + 1 
    $(this) 
    .closest('.itemEvaluation') 
    .find('ul li.lili img') 
    .attr("src", "images/ic_evaluation_type_a" + no + ".png") 

    $(".itemInterest img").attr("src", "images/ic_forbid_off.png") 

} 
function fnimgno(e) 
{ 
    a = e.data.id+1 
    array=["ic_evaluation_type_a"+a+".png"] 
    imgno=0 
    array2=["ic_forbid_off.png"] 
    imgno2=0 
} 

$(".a").mouseout(function() 
{ 
    $(".itemEvaluation > ul > li:eq(1) > img").attr("src", "images/"+array[imgno]) 
    $(".itemInterest img").attr("src", "images/"+array2[imgno2]) 
}) 

$(".itemInterest img").mouseenter(function() 
{ 
    $(".itemInterest img").attr("src", "images/ic_forbid_on.png") 
    $(".itemEvaluation > ul > li:eq(1) > img").attr("src", "images/ic_evaluation_none_m.png") 
}) 

$(".itemInterest img").click(function() 
{ 
    $(".itemInterest img").attr("src", "images/ic_forbid_on.png") 
    $(".itemEvaluation > ul > li:eq(1) > img").attr("src", "images/ic_evaluation_none_m.png") 
    array=["ic_evaluation_none_m.png"] 
    imgno=0 
    array2=["ic_forbid_on.png"] 
    imgno2=0 
}) 

$(".itemInterest img").mouseout(function() 
{ 
    $(".itemInterest img").attr("src", "images/"+array2[imgno2]) 
    $(".itemEvaluation > ul > li:eq(1) > img").attr("src", "images/"+array[imgno]) 
}) 

}); 

我的HTML：

<div class="itemEvaluation"> 
    <ul class="clearfix" style="margin-bottom:7px;"> 
    <li class="itemInterest" style="margin-left:50px"> <a href="javascript:;"> <img name="interest2137585211_01" src="images/ic_forbid_off.png" title="" alt=""/> </a> </li> 
    <li class="lili"> <img alt="" title="" src="images/ic_evaluation_type_b26.png" usemap="#map_img2137585211_0" name="img2137585211_0" border="0" /> 
     <map name="map_img2137585211_0" style="display:inline"> 
     <area class="a" shape="rect" coords="0, 0, 10.3, 19" /> 
     <area class="a" shape="rect" coords="10.3, 0, 20.6, 19" /> 
     <area class="a" shape="rect" coords="20.6, 0, 30.900000000000002, 19" /> 
     <area class="a" shape="rect" coords="30.900000000000002, 0, 41.2, 19" /> 
     <area class="a" shape="rect" coords="41.2, 0, 51.5, 19" /> 
     <area class="a" shape="rect" coords="51.5, 0, 61.8, 19" /> 
     <area class="a" shape="rect" coords="61.8, 0, 72.1, 19" /> 
     <area class="a" shape="rect" coords="72.1, 0, 82.39999999999999, 19" /> 
     <area class="a" shape="rect" coords="82.39999999999999, 0, 92.69999999999999, 19"/> 
     <area class="a" shape="rect" coords="92.69999999999999, 0, 102.99999999999999, 19"/> 
     </map> 
    </li> 
    </ul> 
    <div class="clearfloat"></div> 
</div> 


<div class="itemEvaluation"> 
    <ul class="clearfix" style="margin-bottom:7px;"> 
    <li class="itemInterest" style="margin-left:50px"> <a href="javascript:;"> <img name="interest2137585211_01" src="images/ic_forbid_off.png" title="" alt=""/> </a> </li> 
    <li class="lili"> <img alt="" title="" src="images/ic_evaluation_type_b26.png" usemap="#map_img2137585211_0" name="img2137585211_0" border="0" /> 
     <map name="map_img2137585211_0" style="display:inline"> 
     <area class="a" shape="rect" coords="0, 0, 10.3, 19" /> 
     <area class="a" shape="rect" coords="10.3, 0, 20.6, 19" /> 
     <area class="a" shape="rect" coords="20.6, 0, 30.900000000000002, 19" /> 
     <area class="a" shape="rect" coords="30.900000000000002, 0, 41.2, 19" /> 
     <area class="a" shape="rect" coords="41.2, 0, 51.5, 19" /> 
     <area class="a" shape="rect" coords="51.5, 0, 61.8, 19" /> 
     <area class="a" shape="rect" coords="61.8, 0, 72.1, 19" /> 
     <area class="a" shape="rect" coords="72.1, 0, 82.39999999999999, 19" /> 
     <area class="a" shape="rect" coords="82.39999999999999, 0, 92.69999999999999, 19"/> 
     <area class="a" shape="rect" coords="92.69999999999999, 0, 102.99999999999999, 19"/> 
     </map> 
    </li> 
    </ul> 
    <div class="clearfloat"></div> 
</div> 

Answer 1

好吧，我想更好地了解你正在试图做什么这里...你的事件处理ERS应该是这个样子：

$(".itemInterest img").mouseout(function() 
    { 
     $(this).attr("src", "images/"+array2[imgno2]); 
     $(this).parent().parent().next().children('img').attr("src", "images/"+array[imgno]); 
    }) 

$(".itemInterest img").mouseenter(function() 
    { 
     $(this).attr("src", "images/ic_forbid_on.png"); 
     $(this).parent().parent().next().children('img').attr("src", "images/ic_evaluation_none_m.png"); 
    }) 

如果要应用逻辑在事件处理程序，只有某些元素共享类，你需要确保你选择是选择正确的元素。

现在如果你想执行对所有元素的逻辑选择匹配，你需要确保你遍历由您选择返回的集合，是这样的：

$(".itemInterest img").mouseenter(function() 
    { 
     $(".itemInterest img").each(function(index, element) { 
      $(this).attr("src", "images/ic_forbid_on.png"); 
     }); 
     $(".itemEvaluation > ul").each(function(index, element) { 
      $(this).children('.lili').each(function(index, element) { 
       $(this).children('img').each(function(index, element) { 
        $(this).attr("src", "images/ic_evaluation_none_m.png"); 
       }); 
      }); 
     }); 
    }) 

    $(".itemInterest img").mouseout(function() 
    { 
     $(".itemInterest img").each(function(index, element) { 
      $(this).attr("src", "images/"+array2[imgno2]); 
     }); 
     $(".itemEvaluation > ul").each(function(index, element) { 
      $(this).children('.lili').each(function(index, element) { 
       $(this).children('img').each(function(index, element) { 
        $(this).attr("src", "images/"+array[imgno]); 
       }); 
      }); 
     }); 
    }) 

对不起，所有的编辑，但希望这可以为你澄清事情。

Answer 2

如果您想将jQuery事件处理程序附加到一个特定元素 - 给该元素一个ID并使用ID选择器而不是类选择器。