1

我试图找出为什么 JSON 不能在整个论坛和互联网上的 Firefox 中工作。它适用于平板电脑，即 safari。它可以在我的 Firefox 桌面上运行，但在它上线后就不行了。我尝试了一些东西（注释掉），例如没有解决方案的 mimeType。我曾尝试使用 $.ajax，但运气不佳。Firefox 没有 javascript 错误。我正在使用 jQuery 1.7。

Console.log 正在打印数据。div introCon 是空的（仅在 Firefox 上）。

$(document).ready(function() {
  jQuery.support.cors = true;
  //$.ajaxSetup({ mimeType: "application/json" });
  /*$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json;   charset=utf-8"}); */

  // loading pictures
  $.getJSON("intro.json?format=json", function(data){
    var links = '';
    var imageload = '';
    var title = '';

    console.log(data);
    $.each(data, function(key, item) {
      links += ' <a href=' + item.image + '>' + key + '</a>';
      imageload += '<img src="' + item.image + ' " />';
      title += item.alt;
    });

    $('.introCon').html(imageload);
    $('.introCon img').hide();
    $('.introCon img:last').fadeIn(500);
    $('.introCon img').fadeIn(1000);

    rotatePics(2);
  });
});

function rotatePics(currentPhoto) {
  var numberOfPhotos = $('.introCon img').length;
  currentPhoto = currentPhoto % numberOfPhotos;
  $('.introCon img').eq(currentPhoto).fadeOut( function() {
    // re-order the z-index
    $('.introCon img').each(function(i) {
      $(this).css(
        'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
      );
    });
    $(this).show();
    setTimeout(function() {rotatePics(++currentPhoto);}, 3000);
  });
}

这是来自单独文件的简单 JSON。

{
  "1" : {
    "image" : "portfolio/chrpic.png",
    "alt"   : "Blah.",
    "detail": "Quartz"},
  "2" : {
    "image" : "portfolio/mysspic.png",
    "alt"   : "Landing page.",
    "detail": "Container"},
  "3" : {
    "image" : "portfolio/decode-pic3.png",
    "alt"   : "Decode this.",
    "detail": "Landing page 2"},
  "4" : {
    "image" : "portfolio/simple-think-pic.png",
    "alt"   : "Simple Think",
    "detail": "simpilify your life"}
}
4

2 回答 2

0

好的，我一直在解决这个问题，我想我有一个解决方案（我已经剥离了JS Fiddle中的 JSON 部分，但我认为你可以看到它是如何重新适应的）。到目前为止，这是我想出的：

var data = {
    "1": {
        "image": "http://placekitten.com/200/300",
        "alt": "Blah.",
        "detail": "Quartz"
    },

    "2": {
        "image": "http://placekitten.com/g/210/300",
        "alt": "Landing page.",
        "detail": "Container"
    },

    "3": {
        "image": "http://placekitten.com/200/320",
        "alt": "Decode this.",
        "detail": "Landing page 2"
    },

    "4": {
        "image": "http://placekitten.com/g/210/320",
        "alt": "Simple Think",
        "detail": "simpilify your life"
    }
};
var images = [];

$.each(data, function(key, item) {
    images.push('<img src="' + item.image + '" alt="' + item.alt + '"/>')
});

$('.introCon').html(images.join(''));
$('.introCon img').hide();
$('.introCon img:last').fadeIn(500);

rotatePics(2);

function rotatePics(currentPhoto) {
    var numberOfPhotos = $('.introCon img').length;
    currentPhoto = currentPhoto % numberOfPhotos;
    $('.introCon img').eq(currentPhoto).fadeOut(function() {
        // re-order the z-index
        $('.introCon img').each(function(i) {
            $(this).css('zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos);
        });
        $(this).show();
        setTimeout(function() {
            rotatePics(++currentPhoto);
        }, 3000);
    });
}

查看代码实际上有点难以弄清楚您正在经历什么。getJSON 看起来不错（cors 部分是不必要的，除非您的服务位于不同的域中，但是console.log(data);排除了您在获取数据时遇到问题的可能性。 $.each() 调用是正确的（我错了在询问它是否可以是一个数组），但是在构建图像列表时有一些奇怪的代码。我已经使用Array.push()字符串连接的方法将它简化为单个变量（更快但老实说在这个规模上可能不是瓶颈。然后有一个额外的东西$('.introCon img').fadeIn(1000);导致所有图像淡入淡出。我认为必须有一些 CSS 将所有这些图像放在彼此之上，我将其实现为img { position: absolute; }. 如果图像的大小都相同（或通过 CSS 调整大小），那么这应该可行，在我的情况下，因为我使用的是出色的{placekitten}服务，我必须为图像提供不同的大小才能获得不同的图片。

于 2012-11-21T18:03:27.463 回答
0

尝试这样的事情

  $.each(data, function(key, obj){   
       $.each(obj, function(k, item){  
           links += ' <a href=' + item.image + '>' + key + '</a>';
          imageload += '<img src="' + item.image + ' " />';
           title += item.alt;
        });
  });
于 2012-11-21T07:38:46.290 回答