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

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

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