attach .mouseover и .mouseout для массива

Question

Я не думаю, что это особенно сложно, но я только начинаю понимать jquery. По сути, у меня есть массив, который отображает случайный элемент списка элементов при загрузке страницы. Вот скрипку и код для него: http://jsfiddle.net/uRd6N/

JQuery:

var list = $("ul li").toArray(); 
var elemlength = list.length; 
var randomnum = Math.floor(Math.random()*elemlength); 
var randomitem = list[randomnum]; 
$(randomitem).css("display", "block"); 

HTML:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

CSS:

body { font-family: Helvetica, Arial, sans-serif; font-size:20px; } 
li { display: none; } 

То, что я хочу, чтобы реализовать .mouseover и. mouseout, поэтому, когда курсор мыши находится над элементом списка, он прокручивает другие фразы со скоростью 10 фраз в секунду (как пример). Я просто не знаю, как реализовать .mouseover и .mouseout, точный синтаксис меня запутывает. Любая помощь будет оценена по достоинству.

Answer 1

Вы можете преобразовать массив обратно в объект jquery (список элементов) с помощью $(array).

Пример использования нажмите:

$(list).click(function() { alert($(this).text()); }) 

Обновлено скрипку (для мыши): http://jsfiddle.net/uRd6N/584/

Пример использования Mouseover:

$(list).mouseover(function() { alert($(this).text()); }) 

Вы могли бы быть в состоянии сделать всю работу без .toArray() , тогда нет необходимости конвертировать назад.

Answer 2

Примечание$("ul li") будет возвращать массив, поэтому нет необходимости в .toArray().

Используйте .eq(number) для выбора конкретного элемента индекса.

Используйте .mouseover() чтобы добавить мероприятие.

---

var list = $("ul li"); 
var elemlength = list.length; 
var randomnum = Math.floor(Math.random() * list.length); 
var randomitem = list.eq(randomnum); 

randomitem.css("display", "block"); 

$("ul li") 
    .mouseover(function() { 
     // Use `this` to refer to currently hovered element. 
    }) 
    .mouseleave(function() { 

    }) 
;