学校项目 - 带有别针和 onclick 事件的 IMG答案

【问题标题】：School project - IMG with pins and onclick events学校项目 - 带有别针和 onclick 事件的 IMG
【发布时间】：2017-12-13 22:42:34
【问题描述】：

对于我的学校项目，我和我的小组正在开发一个用于在丹麦某个名为“Brandts”的区域进行导航的网络应用程序，因此制作了一张带有硬编码图钉的地图。因此，当您单击某个图钉时，它会打开所需的商店（图钉具有指定的商店）。

我的想法只是为每个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";
}

【问题讨论】：

你应该使用btn.addEventListener("click",function(){})。

标签： javascript html css twitter-bootstrap frontend

【解决方案1】：

您是否考虑过使用 (this) 关键字？

该关键字可能会对您有所帮助，因为它会识别您正在单击的内容，并且您仍然可以在之后传递您的 onclick 函数。

应该是这样的

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

// 或

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

在此处详细了解“this”关键字的工作原理

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

【讨论】：

谢谢！明天我会和我的小组一起看看:)
另外这个网站可能更适合解释developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
另外，我似乎犯了一个错误，并且正在考虑将 jQuery 用于 .click 事件。如果您能够使用 jQuery，那将是最简单的方法，因为“jQuery 执行了一些 JavaScript 魔术，总是使 this 引用触发事件的 DOM 元素。这是使用 JavaScript 的（众多）原因之一框架而不是自己滚动。”在 javascript 中，关键字 this 指的是 JavaScript 中对象的当前实例。 $(".toggleButton").click(function() { $(this).toggleClass("active"); $(this).removeClass("highlighted");