Javascript scriptaculous:onmouseover/onmouseout用于几个ID和闪烁问题

嗨，基本上我想做的是让相同的事件发生在不同的图像上，并且在一个.js文件中只写一次代码行。这应该是非常基本的，但我找不到任何简单的指南

这是一个代码示例，我每页至少有两次：

<ul class="car-slide">
        <li onmouseover="$('fp1').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp1').appear( {duration:.2}); return false;"><img src="{{skin url='myimage1'}}" id="fp1"></li>
        <li onmouseover="$('fp2').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp2').appear( {duration:.2}); return false;" style="border-left:1px solid #000;border-right:1px solid #000;"><img src="{{skin url='myimage2'}}" id="fp2"></li>
        <li onmouseover="$('fp3').fade( {duration:.2, from:1, to:0.8 }); return false;" onmouseout="$('fp3').appear( {duration:.2}); return false;"><img src="{{skin url='myimage3'}}" id="fp3"></li>
    </ul>

所以在这个列表中是相同的3倍，我有两次。我不知道如何在js中使用语法，以及如何在html中引用它

---

另外，如果你知道为什么第二个li有一些闪烁的问题，特别是当第一个和第三个li没有任何问题时，它会很好，可能与额外的样式有关，但仍然很奇怪，据我所知Scriptaculous是PrototypeJS的扩展。 所以你想调查一下

如果我想选择多个实例，我会给它们一个CSS类。 您的HTML将如下所示：

<ul class="car-slide" id="carslider">
    <li class="carsliderfade"><img src="{{skin url='myimage1'}}" id="fp1"></li>
    <li class="carsliderfade" style="border-left:1px solid #000;border-right:1px solid #000;"><img src="{{skin url='myimage2'}}" id="fp2"></li>
    <li class="carsliderfade"><img src="{{skin url='myimage3'}}" id="fp3"></li>
</ul>

这将选择给定区域中的所有元素

希望能有帮助

来源：

试试这个

$$('.car-slide')[0].select('.carsliderfade').each(function(el){
    el.observe('mouseover', function(){ el.fade( {duration:.2, from:1, to:0.8 }); });
    el.observe('mouseout', function(){ el.appear( {duration:.2}); })
})

---

谢谢你的快速回复！，不幸的是，说到JS，我什么都不知道。我更改了html并添加了css，你刚才提到的方法只是缩短了类名，我用下面的代码尝试了一下，但没有成功。。。函数carHover{document.$'carslider'.GetElementsByCassName'carsliderfa'。每个onmouseover=function el{el.fade{duration:.2，from:1，to:0.8}；返回false；}谢谢！我就这样离开吧。希望将它单独放在js文件中，以便只加载一次，并使用onload或类似的方法调用函数，但这可能是为了我知道我在做什么：您可以将以下代码放在js中，以观察DOM何时准备就绪：document.observedom:loaded，function{/*code here*/}；

$$('.car-slide')[0].select('.carsliderfade').each(function(el){
    el.observe('mouseover', function(){ el.fade( {duration:.2, from:1, to:0.8 }); });
    el.observe('mouseout', function(){ el.appear( {duration:.2}); })
})