-1

我正在学习 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 的末尾，我怎样才能将此链接计数添加到图像而不弄乱页面布局。

4

1 回答 1

0

一种解决方案是将图像包装在 a 中<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>' );
});
于 2013-06-16T00:05:20.000 回答