CODEWITHSUNDEEP
jqueryhtml
Tiglett
Tiglett

Reputation: 1

attach .mouseover and .mouseout to an array

I don't think this is particularly complicated but I'm just beginning to understand jquery. Essentially I have an array that displays a random list element phrase on loading the page. Here's a fiddle and code for it: 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; }

What I want is to implement .mouseover and .mouseout so when a mouse cursor is over the list element, it scrolls through the other phrases at a rate of 10 phrases per second (just as an example). I'm just not sure how to implement the .mouseover and .mouseout, the exact syntax keeps messing me up. Any help would be appreciated.

Upvotes: 0

Views: 84

Answers (2)

Justinas
Justinas

Reputation: 43497

Note $("ul li") will return array, so no need for .toArray().

Use .eq(number) to select specific index element.

Use .mouseover() to attach event.

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 () {

    })
;

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

You can convert the array back to a jquery object (element list) using $(array).

Example using click:

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

Updated fiddle (for click): http://jsfiddle.net/uRd6N/584/

Example using mouseover:

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

You might be able to do all your work without the .toArray(), then there's no need to convert back.

Upvotes: 0

Related Questions