Question

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

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

<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有一些闪烁的问题，特别是当第一个和第三个没有任何问题时快速跳过它会很好（可能与额外的造型有关但仍然很奇怪）< / p>

Answer 1

据我所知，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>

现在我不知道原型中的动画等（我是一个jQuery人）。但这里是如何在原型中选择多个实例。它应该会帮助你：

$('carslider').getElementsByClassName('carsliderfade')....

这应该选择所有＆lt; li＆gt;给定＆lt; ul＆gt;

中的元素

希望有所帮助

来源：Prototype API

Answer 2

试试这个

$$('.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}); })
})

scriptaculous：onmouseover / onmouseout有几个id和闪烁的问题

2 个答案: