Question

我想对鼠标输入的一个div产生影响。我的jquery＆amp; 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

好的，我想更好地理解你在这里要做的事情......你的事件处理程序应该是这样的：

$(".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选择器而不是类选择器。

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

2 个答案: