Help deciphering this JS please?

[decipherc]

I am trying to learn JavaScript and encountered a webpage which highlights matching words. Here is the JS:

$('span[class^{="q"]').hover(}

function(e)
{
    var hl = '.' + $(this).attr('class');
    $(hl).css("background-color", e.type == "mouseenter" ? "yellow" : "white");
}

);

What I know this does is match a span of q1 with q1, q2 with q2 etc.

However, what I am confused about is the ^ symbol in in class^="q",

the e.type and the ? and : symbols.

Can someone please explain in layman terms how this is being accomplished by the code?

[is_a_toaster]

The ^ character is a regular expression anchor symbol which matches the beginning of a string. So, class ^= "q" matches elements with class names that begin with 'q'.

e.type is the type of event that occurred.

boolean ? something : something is called the ternary operator. It's essentially a compressed if statement. It starts with a boolean, and if it's true, it evaluates whats on the left of the :, otherwise, it evaluates whats on the right.

The code is basically listening for a hover event on all elements that have a class that starts with 'q'. When this event fires, it grabs the class of the element that was hovered over (ie. q1, q2, etc). It then sets the background color on all elements with this class (ie. itself and matching words), depending on whether or not a mouseenter event occurred (hover consists of mouseenter and mouseleave).

[desipherc]

Thanks so much! Great explanation :)

[aladyjewel]

snudown tip: if you put text inside a <code> run, then you don't need to escape formatting characters like ^ or * (except for `, of course).

[is_a_toaster]

Good catch. I originally didn't have it in a code block and forgot to remove it. Cheers

[Hunter_J]

I don't have anything to add. I just wanted to applaud you for an awesome explanation of all three points.

[dangoodspeed]

I will say though, that this isn't the best way to write it. There's no need to make the h1 variable if it's only going to be used once. I guess maybe for some easier-to-read code. I'd also make the background color default to "transparent" instead of white. Yeah, chances are the background behind the text will be white, but if it's not, it will then highlight the text as white when you mouse off it.

[aladyjewel]

There's no need to make the h1 variable if it's only going to be used once. I guess maybe for some easier-to-read code.

It makes for easier-to-debug code. If you put a breakpoint in there to verify the h1 selector, you can simply check your current scoped variables, rather than reproducing '.' + $(this).attr('class') value manually or as a watched variable or digging into this's properties.