スクールプロジェクト - ピンとonclickイベントを伴うIMG

私の学校プロジェクトでは、私のグループと私は、 "Brandts"と呼ばれるデンマークのある地域のナビゲーション用にウェブアプリケーションを作成しているので、ハードコードされたピンがマップされています。ピンをクリックすると、目的のショップ（ピンにはショップが割り当てられています）が開きます。スクールプロジェクト - ピンとonclickイベントを伴うIMG

私の考えは、単に各divためonclickを作ることだったが、トラブルが始まる場所です。私はそれ以上は得ることができません。以下にリンクされているHTMLとJavaScript。

HTML：

<body> 
    <div class="map"> 
     <img src="img/map.png" alt="kort over brandts klædefabrik området" /> 
     <div id="myBtn" class="cuckoosBox"></div> 
    </div> 
</body>

はJavaScript：

var modal = document.getElementById("myModal"); 

var btn = document.getElementById("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 
span.onclick = function() { 
    modal.style.display = "none"; 
}

出典

2017-12-13 Frederik Bruun

Yどのように機能するかについてのチェックアウトの詳細[btn.addEventListener（ "click"、function（）{}） ']（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener）を使用してください。 – Siphalor

あなたは（この）キーワードを使用して考えたことはありますか？

キーワードは、あなたがクリックしていることを認識し、その後もあなたのonclick関数を引き続き渡すことができるため、おそらく助けになる可能性があります。

のようなものでなければなりません

(this.btn).onclick = function() { Code here };

//または

(this.div).onclick = function() { };

"この" キーワードはここ

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

出典

2017-12-13 22:54:30 rforcier2

ありがとうございました！私は明日私のグループと一緒に見ていきます:) –

このサイトはおそらく説明のために良いでしょう https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – rforcier2

私は間違いを犯し、jQueryを.clickイベントに使用することを考えていました。「jQueryは、イベントを引き起こしたDOM要素を常に参照するJavaScriptマジックをいくつか実行するため、これを行う最も簡単な方法であるjQueryを使用できる場合は、JavaScriptを使用する理由の1つ（多くの理由の1つ）フレームワークではなく、独自のロールバック。 JavaScriptでは、キーワードthisはJavaScriptのオブジェクトの現在のインスタンスを参照します。 '$（ "トグルボタン "（）関数（）{ $（この）.toggleClass（" アクティブ "）をクリックしてください。。 $（この）.removeClass（" 強調表示を"）;' – rforcier2

スクールプロジェクト - ピンとonclickイベントを伴うIMG

答えて

関連する問題