加载时获取jsonp的选择器？

Question

我一直在编写代码，可以通过原生 javascript 获取 blogspot json 数据，但我想添加一个 post 滑块，但是当我调用变量指向 class 的 posts class，它 return

Uncaught TypeError: Cannot read property 'contains' of undefined Here the slider Code

var item = document.querySelectorAll(".featured .item"),
  slideLeft = document.getElementById("slideLeft"),
  slideRight = document.getElementById("slideRight"),
  current = 0;

function reset() {
  for (var i in item) {
    if (item[i].classList.contains("current")) {
      item[i].classList.remove = "current"
    }
  }
}

function startSlide() {
  reset();
  item[0].classList.add("current");
}

function sLeft() {
  reset();
  item[current - 1].classList.add("current");
  current--;
}

function sRight() {
  reset();
  item[current + 1].classList.add("current");
  current++;
}
slideLeft.addEventListener("click", function() {
  if (current === 0) {
    current = item.length;
  }
  sLeft()
})
slideRight.addEventListener("click", function() {
  if (current === item.length - 1) {
    current = -1;
  }
  sRight()
})
startSlide()

Here 是我创建的 jsfiddle。

请给我一个在 json post

中添加幻灯片的方法

Answer 1

您可以通过将 //handle slider 代码包装在一个函数中并在 JSONP 响应返回时调用它来修复该错误。 see fiddle

现在您正在执行 var item = document.querySelectorAll(".featured .item")，然后响应返回，此时 HTML 不存在，这意味着 item 是一个空节点列表。

您正在获得

"Uncaught TypeError: Cannot read property 'contains' of undefined"

因为在 reset() 中，您循环遍历 returned 空节点列表的属性（不一定只有您期望的节点）继承的属性通过循环 - length 属性并且没有 classList 属性所以这就是为什么 item[i].classList.contains("current") 会 return那个错误。

额外信息：为了防止遍历对象原型链中的属性，您可以像这样包含对 hasOwnProperty() 的检查：

for (var i in item) {
  // if the item object does not have this property as its own 
  // (for example its an inherited property) then skip this property.
  if (!item.hasOwnProperty(i)) {
    continue;
  }
  ....
}

加载时获取jsonp的选择器？

get selector of jsonp when it loaded?

javascript

json

blogspot