突出 <li> 在js中的onClick函數中

Question

我有一個小問題。

當您單擊它時，我想突出顯示答案，但.style似乎不起作用:(

我有一部分這樣的html代碼：

<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>

在我的腳本中我得到了這個：

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

該函數在每次單擊時都很好調用，但是背景沒有改變，我不明白為什么：/

我看了看互聯網，看到很多人這樣做

謝謝答案

Answer 1

由於jQuery對象沒有style屬性，因此未應用style 。 您可以改用css方法：

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

或者，您可以使用基礎元素（不要將其傳遞給jQuery）：

this.style.backgroundColor = "#FFFF00";

第二個示例可能會更有效。

Answer 2

用這個

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

代替這個

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

Answer 3

在此處修復： http ： //jsfiddle.net/RichardTowers/99Zpz/

Answer 4

嘗試：

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

代替 ：

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