Question

我找到了一个解决方案，允许我点击某个区域以使用JavaScript显示工具提示，但仅适用于第一个项目。 Here is that solution.

以下是代码：

<script>
  function doTip(e) {
    var elem = e.toElement;
    if (elem.getAttribute('data-tip-on') === 'false') {

      elem.setAttribute('data-tip-on', 'true');
      var rect = elem.getBoundingClientRect();
      var tipId = Math.random().toString(36).substring(7);
      elem.setAttribute('data-tip-id', tipId);
      var tip = document.createElement("div");
      tip.setAttribute('id', tipId);
      tip.innerHTML = elem.getAttribute('data-tip');
      tip.style.top = event.clientY + 15 + 'px';
      tip.style.left = event.clientX + 10 + 'px';
      tip.setAttribute('class', 'tip-box');
      document.body.appendChild(tip);

    } else {

      elem.setAttribute('data-tip-on', 'false');
      var tip = document.getElementById(elem.getAttribute('data-tip-id'));
      tip.parentNode.removeChild(tip);


    }
  }

  function enableTips() {
    var elems = document.getElementsByClassName('quick-tip');
    for (var i = 0; i < elems.length; i++) {
      elems[0].addEventListener("click", doTip, false);

    }
  }
  window.onload = function() {
    enableTips();
  }

</script>
<style>
  .quick-tip {
    background: black;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    height: 15px;
    width: 15px;
    text-align: center;
    font-weight: 900;
    margin-left: 350px;
  }

  .tip-box {
    /* change dimensions to be whatever the background image is */
    height: 50px;
    width: 200px;
    position: absolute;
  }

</style>

<map>
  <area class="quick-tip" shape="poly" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false"/>

  <area class="quick-tip" shape="poly" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false"/>
</map>

<script>
  enableTips();

</script>

只有顶部有效，底部无效。我需要的功能是两个按钮在点击时显示工具提示。我试过缝合不同解决方案的其他部分无济于事。我也尝试了其他解决方案，似乎没有一个在我的页面上工作。

我修改了原始解决方案并使用了<area>，因为当鼠标悬停在<area>上时，该页面最初会弹出工具提示。需要将悬停功能更改为在解决方案中单击，但第一个是唯一有效的。

Answer 1

你有一个错字

var reviews = document.querySelector("put your selector here"),
    access_id = "6372114628.890c38a.4e03aa92b121459c84e893c54c3c0ce1",
    post_count = 10;
var query = jQuery.ajax({
    url: `https://api.instagram.com/v1/users/self/media/recent?access_token=${access_id}&count=${post_count}&callback=?`,
    error: function () {
        console.error();
    },
    success: function (result) {
        result.data.map(function (item) {
            reviews.innerHTML += `<a class="images" href="${item.link}" target="_blank"><img src="${item.images.low_resolution.url}" /></a>`;
        });
    },
    type: "GET",
    dataType: "jsonp"
});

应该是

elems[0].addEventListener("click", doTip, false);

如何扩展此JavaScript以适用于多个项目？

1 个答案: