2016-12-12 7 views
-4

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

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

要素オブジェクトにはCSSメソッドがありません – billyonecan

+3

二重引用符で囲まれた二重引用符はエラーの原因です。 – tymeJV

答えて

1

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

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

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

0

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

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

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

0

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

$(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のコードを使用します! これが役立つことを願っています!

0

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

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

0

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

二つの出身ユーザー:

  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> 

これが役に立ちます。

関連する問題