0

嗨，基本上我想做的是让不同的图像发生相同的事件，并且只在 .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 有一些闪烁的问题，尤其是在第一个和第三个完全没有问题的情况下快速浏览它时，那就太好了（可能与附加样式有关，但仍然很奇怪）

4

2 回答 2

0

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

这应该选择给定 <ul> 中的所有 <li> 元素

希望能帮助到你

来源：原型 API

于 2010-12-01T08:38:43.037 回答
0

试试这个

$$('.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}); })
})
于 2010-12-01T09:27:39.323 回答