scriptaculous: onmouseover / onmouseout для нескольких идентификаторов и мерцающей проблемы - PullRequest
Новая
       41

scriptaculous: onmouseover / onmouseout для нескольких идентификаторов и мерцающей проблемы

0 голосов
/ 01 декабря 2010

Привет, так что в основном я хочу, чтобы одно и то же событие происходило с разными изображениями и только один раз записывало строку кода в файл .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 есть проблемы с мерцанием, особенно при быстром переходе через него, когда у первого и третьего нет проблем вообще, это было бы здорово (может быть связано с дополнительным стилем, но все же странно) 1008 *

Ответы [ 2 ]

0 голосов
/ 01 декабря 2010

попробуйте 

$$('.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}); })
})
0 голосов
/ 01 декабря 2010

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')....

Это должно выбрать все

элементов в данном
...