Highlight <li> in function onClick in js

Question

I have a little issue.

I want to highlight the answer when you click on it but the .style seem not working :(

I have a part of html code like this:

<div id="answers-type1">
    <ol>
        <img src="" id="answer-a-img" /><li id="answer-a" ></li>
        <img src="" id="answer-b-img" /><li id="answer-b" ></li>
        <img src="" id="answer-c-img" /><li id="answer-c" ></li>
        <img src="" id="answer-d-img" /><li id="answer-d" ></li>
    </ol>
</div>

and in my script i got this:

$("#answers-type1 li").click(function() {
     $(this).style = "background-color: #FFFF00;";
     if ($(this).text() == goodAnswer)
     {
         alert("JAYJAY");
     }
     else
     {
         alert("pas JAYJAY");
     }
});

the function is well called on each click but the background is not changing i don't understand why :/

I looked over internet and saw a lot of people doing like that

thanks for answers

Answer 1

The style is not applied because jQuery objects don't have a style property. You can use the css method instead:

$(this).css("background-color","#FFFF00");

Alternatively, you could use the underlying element (don't pass it to jQuery):

this.style.backgroundColor = "#FFFF00";

The second example will likely be more efficient.

Answer 2

Use this

$(this).css("background-color","#FFFF00");

instead of this

this.style = "background-color: #FFFF00;";

Answer 3

在此处修复： http ： //jsfiddle.net/RichardTowers/99Zpz/

Answer 4

try:

$(this).css("background-color","#FFFF00");

instead of :

$(this).style = "background-color: #FFFF00;";