0

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

2 回答 2

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>
于 2014-12-30T02:09:15.933 回答
-1

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>
于 2014-12-30T08:00:02.003 回答