Question

我正在学习JS，我正在尝试向页面上的所有链接添加一个整数（点击次数）（此数据正在从外部API解析）。

我目前正在更改每个链接的链接textContent，并将整数附加到textContent的末尾，这适用于所有文本链接，但是我遇到了将此点击计数整数添加到图像上的问题。页。在页面上显示图像点击次数的最佳方法是什么。我是否可以将点击次数添加为图片上的叠加层？

到目前为止我的代码：

function ls(url) {
  var getURL = "url" + url;
  var req = new XMLHttpRequest();
  req.open("GET", getURL, "true");
  req.onload = function() {
    var resObj = JSON.parse(req.responseText);
    var links = document.querySelectorAll("a");
    for (var i = 0; i < links.length; i++) {
      var rawLink = links[i].href; var linkText = links[i].textContent; var link = links[i].href.replace(/(.*)#?/, "$1");
      var escapedLink = escape(rawLink);
      if (rawLink in resObj) {
        links[i].textContent = linkText + " (" + resObj[rawLink] + ")";
      } else if (escapedLink in resObj) {
        links[i].textContent = linkText + " (" + resObj[escapedLink] + ")";
      }
    }
  };

这只是将链接计数附加到textContent的末尾，如何在不弄乱页面布局的情况下将此linkcount添加到图像。

Answer 1

一种解决方案是将图像包装在<div>中，并将点击计数文本添加为另一个子项。类似的东西：

<div class="image-wrapper">
    <img src="..." alt="..." />
    <div class="click-count">10</div>
</div>

然后使用CSS将点击计数文本设置为放置在图像的一角。可能是这样的：

.image-wrapper { position: relative; }
.click-count { position: absolute; bottom: 10px; right: 10px; }

要将文本添加到图像中，您必须执行类似的操作（请注意，我使用jQuery是为了简单起见，因为问题标记为这样）：

$( 'img' ).each( function() {
    // Test we need to add the click count
    ...

    // Add the click count number
    $( this ).wrap( '<div class="image-wrapper" />' ).append( '<div class="click-count">' + click_count + '</div>' );
});

Javascript页面叠加而不更改dom

1 个答案: