将 JavaScript 计数器添加到我的图像中

Adding Javascript Counter to my Images

本文关键字：我的 图像 添加 JavaScript 计数器      更新时间：2023-09-26

我正在尝试为我通过Instagram API提取的图像添加一个JavaScript计数器。希望通过添加一个计数器，我可以给图像一个唯一的ID，允许我将它们操作到滑块中。我刚刚开始学习计数器，任何帮助将不胜感激！


这是我正在处理图像的页面：http://carabinercoffee.com/instagram.html


下面是我与instafeed.js插件一起使用的代码。我认为可能有一种方法可以使用模板部分来处理某些事情，但这只是一个猜测。

<script type="text/javascript">
    var userFeed = new Instafeed({
       get: 'user',
       userId: xxxxxxx,
       accessToken: 'xxxxxxxxx',
       limit: 24,
       resolution: 'low_resolution',
       template: '<a href="{{link}}"><img src="{{image}}"/></a>',
       useHttp: true ,
  });
  userFeed.run();
</script>

如果您只想向每个a标记颁发一个 id，则可以使用以下代码：

var aTags = document.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
    aTags[i].setAttribute("id", i);
}

此代码将循环浏览当前网页中的所有a标记，并发出增量 ID。

以前：

  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>

后：

  <a id="0" href="google.com">Test</a>
  <a id="1" href="google.com">Test</a>
  <a id="2" href="google.com">Test</a>
  <a id="3" href="google.com">Test</a>
  <a id="4" href="google.com">Test</a>

mwilson的回答以及instafeeed代码中的一个小补充解决了这个问题。我需要在插件的代码中添加一个 after 函数才能使 mwilson 的解决方案生效。代码如下：

<script type="text/javascript">
$(document).ready(function() {
var userFeed = new Instafeed({
   get: 'user',
    userId: xxxxxxx,
    accessToken: 'xxxxxxx',
    limit: 24,
    resolution: 'low_resolution',
    template: '<a href="{{link}}"><img src="{{image}}" id="{{id}}"/></a>',
    useHttp: true,
    after: function () {
    var aTags = document.getElementsByTagName('img');
    for (var i = 0; i < aTags.length; i++) {
    [i].setAttribute("id", i);}
    },
});
userFeed.run();
});
</script>
相关文章：