2017-04-17 6 views
-2

私は本当に簡単な問題があります。私は画像をクリックすると警告を発するスクリプトを作りたい。要素がクリックされたときに警告を出す方法

私のHTMLは次のとおりです。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="style.css" \> 
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script> 
    <script src="lightbox.js" type="text/javascript" \> 
    </script> 
    </head> 
    <body> 
    <img class="img" src="http://lorempixel.com/400/200/"></img> 
    </body> 
</html> 

とJS:

$("img").click(function() { 
    alert("dadadad"); 
}); 

私はすべてのヒントが参考になる、JavaScriptに新たなんだ

+3

は、第2 'リットルを取り除きます'警告する '。 –

+0

一般的なヒント:ブラウザのコンソール(通常はF12)を開き、JavaScriptコードにエラーが表示されます。 – arkascha

+0

この問題は、**再現できない問題**または** a単純な誤植**。同様の質問がここでは話題になるかもしれないが、これは将来の読者を助けるとは思わない方法で解決された。これは、投稿する前に[問題を再現するのに必要な最短のプログラム](http://stackoverflow.com/help/mcve)を特定して綿密に調べることで回避できます。 –

答えて

1

ことを確認しあなたが書いた任意のjQueryのコード下記のように「ドキュメント対応」ブロック内に定義され、の後に jQueryリファレンスの後に定義されます。

<img class="img" src="http://lorempixel.com/400/200/"></img> 
<script> 
    // This will ensure that jQuery has been loaded before it is used 
    $(function(){ 
     $("img").click(function() { 
       alert("dadadad"); 
     }); 
    }); 
</script> 

ピュアJavascriptのアプローチ

それはあなたがは十分であろうaddEventListener()関数として、このためにのjQueryを必要としないことは注目に値します:

<script> 
    // Select all of your images 
    var images = document.querySelectorAll('img'); 
    for (var i = 0; i < images.length; i++) { 
     // Wire up a click event listener for each of them 
     images[i].addEventListener('click', function(){ 
     alert('foo'); 
     }); 
    } 
</script> 
+0

その作業!ありがとう。なぜ、このコードが機能の外で動作していないのか、私に伝えることができますか? – AbUndZu

+1

答えで述べたように、 '$(function(){...}) 'を使うと、jQueryが使用される前に確実にロードされます。このブロックがなければ、 '$'シンボルに遭遇すると、そのシンボルは何であるのか分からなくなり、あなたのイベントリスナーを作成することはないので、あなたのコードは動作しません。 jQueryも関与したくない場合は、純粋なJSの実装例を追加しました。 –

関連する問題