jqueryを使用して色を変更する

Question

コードに問題があります。おそらく、私が注意を払わない愚かなものでしょう。

<li><img src="images/red.gif" id="set" 
onclick="document.getElementById("set").css("background-color","red")></li> 

Answer 1

属性の値の中に二重引用符を使用しています。値内の属性のための二重引用符と単一引用符を使用します。

また

onclick="document.getElementById('bla')" 

は、二重引用符を閉じることを忘れないでください。

Answer 2

.css()関数は、jQueryオブジェクトに対してのみ機能します。

<li><img src="images/red.gif" id="set" onclick="$('#set').css('background-color', 'red');"></li> 

また、引用符を見る必要があります。私は二重引用符で囲んだonclick値をラップし、その値の中に一重引用符を使いました。

Answer 3

あなたはこのようにそれを行うことができます。

$(function() { 
 

 

 
\t $('#set').on('click', function(e) { 
 
    \t $(this).css('background-color','red'); 
 
    }); 
 

 

 
});

img { 
 
    display: block; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <img src="images/red.gif" id="set" > 
 
</li>

document.getElementById(...).css is not a functionということを覚えて、その代わりにjqueryのコードを使用します！ これが役立つことを願っています！

Answer 4

.cssメソッドは、jqueryでのみ使用できます。あなたはJavaScriptを使用したい場合には、そのよう.styleメソッドを使用する必要があります。

<li> 
 
     <img src="images/red.gif" id="set" onclick="document.getElementById('set').style.backgroundcolor = 'red'"></li>

Answer 5

コードの何が問題になっているのですか？

二つの出身ユーザー：

1. あなたは、単一引用符'を使用することができることを避けるために、引用符の問題（ダブルクォートの内部に二重引用符）をしました：

   <li.... onclick='document.getElementById("set").css("background-color","red")'></li> 
   ________________^____________________________________________________________^ 
   

2. ます'jQueryメソッド.css()にアクセスしようとしていますが、これはうまくいきません。代わりにjQueryオブジェクトを使用してください：

   <li.... onclick='$("#set").css("background-color","red")'></li> 
   _________________^^^^^^^^^ 
   

注：

JS：

$(function() { 
    $('#set').on('click', function() { 
     $(this).css('background-color', 'red'); 
    }); 
}); 

私はjQueryのを使用して、よりeffecient方法で、より多くのインラインイベント onclickと攻撃クリックイベントを使用しないようにお勧め

HTML：

<li> 
    <img id='set' src='images/red.gif'/> 
</li> 

これが役に立ちます。