Question

我正在尝试为我通过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>

Answer 1

如果您只想为每个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>

Answer 2

mwilson的答案以及对这个问题进行了一些小的补充。我需要在插件的代码中添加 after function ，以使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>

将Javascript计数器添加到我的图像

2 个答案: