Question

我发帖是因为我遇到了一个我正在尝试开发的脚本的问题。

我想要创建的是一个从Instagram接收它的图像的画廊。为了完成这两项任务，我发现了两个符合我需求的插件，但是我无法将它们融合在一起。

我对Jquery比较新，我不明白为什么我试图运行的脚本只会影响代码的一部分。

此示例库有两个基本部分：

1）由开发者预先加载：

<div class="content-primary"> 
    <ul class="iGallery" id="iGallery">

    <li>
  <a href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_n.jpg">
    <img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_s.jpg">
 <li><a class="ui-link" href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_s.jpg"></a></li></ul>
  </a>
</li>
</ul>

而且，由于instagram api而动态添加的那些：

<script type="text/javascript">

    (function() {
      var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
      t.parentNode.insertBefore(s, t);
    })();
  /* ]]> */
    function createPhotoElement(photo) {
      var innerHtml;
        innerHtml= $('<img>')
        .attr('src', photo.images.thumbnail.url);

       innerHtml = $('<a>')
      .attr('href', photo.images.standard_resolution.url)
      .append(innerHtml)
      .append(innerHtml)
       .addClass( "ui-link" );


      return $('<li>')
        .append(innerHtml);
    }

    function didLoadInstagram(event, response) {
      var that = this;

      $.each(response.data, function(i, photo) {
        $(that).append(createPhotoElement(photo));
      });
    }

    $(document).ready(function() {
      var clientId = 'baee48560b984845974f6b85a07bf7d9';

      $('.iGallery').on('didLoadInstagram', didLoadInstagram);
      $('.iGallery').instagram({
        hash: 'usa123',
        count: 1,
        clientId: clientId
      });

    });
  </script>

嗯，主要的问题是处理图库的部分似乎只读取手动添加的部分，而不是由于app api而来的部分。

我很确定我的问题与脚本加载的时间有关，因为脚本更改了href to data-href等图像的某些属性，但我试图预加载该信息，我收到了同样的结果。

为了直观地了解我的问题，我在codepen中有脚本：

http://codepen.io/anon/pen/XJdbZR

In red is the image that is added dynamically

而且，这是我的想法告诉我只有脚本修改了每个加载的信息

enter image description here

我感谢任何帮助或提示。感谢

Answer 1

简短的回答？丢失jQuery标识符中的<>个字符。您应该将标识符视为与CSS标识符相同。

即; $('<a>')实际应该是$('a')。

要对此进行测试，请继续在您喜欢的浏览器控制台中运行它们并查看差异。

Answer 2

问题是第一次页面inits会将imageflip绑定到所有ul#iGallery个孩子，并且在那一刻你的新图像没有被加载所以通常在类似情况下必须绑定你的函数 imageflip 再次进入ul。我确定这会解决你的问题，但在你的情况下这是另一个问题，因为插件结构，你不能将imageflip绑定两次。
我在codepen修复你的代码“{{3} “但这仅在didLoadInstagram函数触发时才有效。

脚本不会影响所有元素

2 个答案: