0

我有一个精灵图像，而不是在它上面发生 mouseenter/mouseleave 时，背景位置会发生变化。到目前为止，尽管可能有一种更有效的方法来做到这一点，但这仍然有效。但是，我有几张图像需要处理，并且正在尝试找到一种方法将图像的 id 输入到 jQuery 中，而不是重复代码。
的HTML：

<div class='featSmallBox' id='featSmallImg2'>
</div>

图像源使用 CSS 放置。
到目前为止，这就是我对 jQuery 所做的。

 $("#featSmallImg2").mouseenter(function(){
                    $(this).animate({
                   backgroundPositionX:"100%"
                     });
                   });

 $("#featSmallImg2").mouseleave(function(){
                    $(this).animate({
                   backgroundPositionX:"0%"
                     });
                    });

理想情况下，我需要动态输入鼠标输入内容的 id，但我尝试过的一切似乎都不起作用。
抱歉，如果这几乎没有意义。我是 jQuery 和这个网站的新手。

4

3 回答 3

1

如果包含精灵的所有 div 的 jQuery 代码都相同，请尝试将$("#featSmallImg2")jQuery 更改为$(".featSmallBox"). 这样，您所有的 div 类.featSmallBox都将具有此功能。

于 2013-10-17T09:07:48.337 回答
0

检查event.target

$( "body" ).mouseenter(function( event ) {
   console.log( "mouseentered id: " + event.target.id);
});
于 2013-10-17T09:08:30.050 回答
0 
$("div[id^='featSmallImg']").mouseenter(function(){
                    $(this).animate({
                   backgroundPositionX:"100%"
                     });
                   });

$("div[id^='featSmallImg']").mouseleave(function(){
                    $(this).animate({
                   backgroundPositionX:"0%"
                     });
                    });

试试这个代码。将为所有 id 以“featSmallImg”开头的 div 调用事件

于 2013-10-17T09:36:04.800 回答