我怎样才能让我的 json 文件工作？答案

【问题标题】：how can i get my json file to work?我怎样才能让我的 json 文件工作？
【发布时间】：2016-07-26 02:53:09
【问题描述】：

我正在联系我是否可以得到一个我遇到问题的 json 文件的答案。我正在边缘动画中制作幻灯片，我正在使用 json 文件将一些图像插入一些占位符（符号化的 div）中，我每 8 秒制作一次动画。或者。我尝试从我观看的教程中获取此信息，但我无法按应有的方式设置 json 文件。当我在浏览器中预览幻灯片时，我的图像不会加载到占位符中，我看到的只是根据动画移动的灰色框。我最好的猜测是我的 json 文件不正确，这就是为什么它没有将图像链接到占位符。这是我的代码：

var imageArray = new Array();
var currentImage = 0;
var s = sym.getSymbol ("slider_Sym_A");
sym.$("Sample Slide").html("");

$.getJSON("LineA.json", function(data) {
   for(var i=0; i<data.length; i++){
      imageArray.push({"image":data[i].image, "title":data[i].title});

    }
    sym.$("Sample Slide").html(imageArray[currentImage].title);
    s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
    s.play("Rest");
});

sym.grabNewImage = function(){
    currentImage++;
    if (currentImage>7){
        currentImage = 0;
}
     s.$("ImageHolderTwo1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
}

sym.setOldImage = function(){
   s.$("ImageHolderOne1") .css({"background-image":"url('"+imageArray[currentImage].image+"')"});
   setTimeout(function() {
     s.play("Rest");
   }, 500);
}

json:

[
  {
"image":"PhotoA.gif",
"title":"Re - Stage"
  },
  {
"image":"PhotoA_1.gif",
"title":"ABDC"
  },
  {
"image":"PhotoA_2.gif",
"title":"W - Stage"
  },
  {
"image":"PhotoA_3.gif",
"title":"C - Stage"
  },
 {
"image":"PhotoA_4.gif",
"title":"Riser"
  },
  {
"image":"PhotoA_5.gif",
"title":"Sign"
  },
  {
"image":"PhotoA_6.gif",
"title":"X - Stage"
  },
  {
"image":"PhotoA_7.gif",
"title":"Jason"
  }
]

我感谢任何给我意见的人。与此同时，我将继续尝试解决这个问题。

【问题讨论】：

你不是在说问题是什么——你能解释一下问题是什么吗？（有关提示，请参阅How to Ask） - 话虽如此，您的选择器似乎是错误的 - 而不是 $("ImageHolderTwo1") - 如果它是 id 或 $(".ImageHolderTwo1") 如果它是 class，您可能需要使用 $("#ImageHolderTwo1") - 它适用于所有选择器
很抱歉。我的问题是我的图像不会加载到我的占位符中。它们是 div，但没有 id 或类。
你尝试修复你的选择器了吗？
是的，我什至给了类的 div 相同的名称，然后尝试了一个 id，但仍然没有链接我的图像。
看看我的回答是否有帮助 - 你是否在控制台中遇到任何错误？

标签： javascript jquery arrays json slideshow

【解决方案1】：

我稍微修改了您的代码以使用正确的选择器（并尽量减少冗余代码）

见下文（提示：与选择器有很大关系）

var jsonData = [{
  "image": "http://placehold.it/400x200",
  "title": "Re - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "ABDC"
}, {
  "image": "http://placehold.it/400x200",
  "title": "W - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "C - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Riser"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Sign"
}, {
  "image": "http://placehold.it/400x200",
  "title": "X - Stage"
}, {
  "image": "http://placehold.it/400x200",
  "title": "Jason"
}];

// keeps track of image currently on display
var currentImage = 0;

// Displays next image in JSON array until at last image of array
// if already at the last image, resets to display first image
var slideNext = function() {
  if (currentImage >= jsonData.length) {
    currentImage = 0;
  }

  var imgTitle = jsonData[currentImage].title;

  $("#imageSlider").find('h1').html(imgTitle);
  $("#imageSlider").find('img').attr('src', jsonData[currentImage].image + '?text=' + imgTitle);
  currentImage++;
};

// event handler for button (to display next image manually)
$("#next").on('click', function() {
  slideNext();
});

// every interval, display next image automatically
setInterval(function() {
  slideNext();
}, 3 * 1000); // time is in milliseconds so 3 * 1000 = 3 seconds

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imageSlider">
  <h1>Image title</h1>
  <img src="" />
</div>
<button id="next">Next</button>

【讨论】：