scriptaculous：onmouseover/onmouseoutいくつかのidsとちらつきの問題

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でそれを参照する方法を知らない。

また、第2の李が何かちらつきの問題を抱えている理由が分かっている場合、特に最初と3番目の問題が全くないときには速くなってしまったときには（素晴らしいスタイリングですが、

Answer 1

この

を試してみてください。これは>

はそれが

ソースの役に立てば幸い与え< UL内のすべての<李>要素を選択する必要があり

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

：それは道に沿ってあなたを助ける必要があります

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

Answer 2

Scriptaculousは私が知る限りPrototypeJSの拡張です。 だから、それを調べたいと思う。

複数のインスタンスを選択したい場合、私はそれらにCSSクラスを与えます。今、私はプロトタイプでアニメーションなど（私はjQueryの男だ）について知らない

<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> 

： あなたのHTMLは次のようになります。しかし、プロトタイプで複数のインスタンスを選択する方法があります。 Prototype API