Instafeed通过输入更改标记值

Instafeed changing tagged value by input

本文关键字:输入 Instafeed      更新时间:2023-09-26

我试图通过输入更改我的标记名称,一旦按下回车键,它将重新运行feed.run();

var num = 60;
var inputTextValue;


window.onkeyup = keyup;
    function keyup(e) {
      inputTextValue = e.target.value;
      $('#searchValue').text(inputTextValue);
      if (e.keyCode == 13) {
          inputTextValue = e.target.value;
          feed.run();
      }
    }
    var feed = new Instafeed({
   get: 'tagged',
   tagName: inputTextValue,
    userId: 3614616,
    accessToken: '3614616.467ede5.abc0b5a861d34365a5c8dd8db0163c4b',
    limit:"100",
    resolution : "low_resolution",
    after: function () {
    var images = $("#instafeed").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
});

有了这个我会得到一个错误

No tag name specified. Use the 'tagName' option.

任何想法都可以更新标记的名称值吗?感谢您的帮助。

您遇到的问题的根源在于如何将变量传递给 JavaScript 中的函数。

字符串是"按值传递"的,在您的情况下,这意味着在您通过执行new Instafeed({ .. });创建实例时.js inputTextValue的值正在复制到 Instafeed。

这也意味着当你以后更改inputTextValue的值时,它不会更新Instafeed.js设置(因为它是在你设置Instafeed.js时复制的)。

为了解决此问题,您需要通过更改feed变量上的属性来直接更新 Instafeed.js 设置。下面是原始脚本的略微修改版本:

var num = 60;
var inputTextValue;
var feed = new Instafeed({
  get: 'tagged',
  tagName: 'placeholder',
  userId: 3614616,
  accessToken: '3614616.467ede5.abc0b5a861d34365a5c8dd8db0163c4b',
  limit:"100",
  resolution : "low_resolution",
  after: function () {
    var images = $("#instafeed").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
});
window.onkeyup = keyup;
function keyup(e) {
  inputTextValue = e.target.value;
  $('#searchValue').text(inputTextValue);
  if (e.keyCode == 13) {
    inputTextValue = e.target.value;
    feed.options.tagName = inputTextValue; // forceably update instafeed.js settings.
    feed.run();
  }
}