Question

嗨嗨，我是noob :(而且我正在处理这个单页项目，有一些产品库。这些产品存在于具有特定HTML ID的卡片中。当我点击一张卡片时，我希望我的jQuery脚本读取卡片的HTML ID，并使用该字符串来读取一个JSON文件 - 它包含所有的图库。这应该使用img src标签填充我的图库，它存在于OwlCarousel插件中。我得到了它与一个画廊合作，但我不确定我应该如何让它在其他画廊上工作。这是我的jQuery：

// waiting for the click on the .entry-card class

$('.entry-card').click(function() {

  // getting element id; i use this to read the JSON file
  var galleryNumber = $(this).prop('id');

  // firing up bootstrap modal
  $('#modal-gallery').modal();

  // firing up owl carousel inside #modal-gallery
  $('#modal-gallery-carousel').owlCarousel({
  singleItem : true,    
  lazyLoad : true,
  jsonPath : '../data/gallery-entries.json',
  jsonSuccess : customDataSuccess
});

// this is the part i don't get; it's straight out from the owlcarousel tutorial

function customDataSuccess(data) {
  var content = "";
  for (var i in data[galleryNumber]) {
    var img = data[galleryNumber][i].img;
    var alt = data[galleryNumber][i].alt;

    content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
    }
    $('#modal-gallery-carousel').html(content);
  }
});

// waiting for modal to finish closing

$('#modal-gallery').on('hidden.bs.modal', function() {
  $('#modal-gallery-carousel').html('');
  var owl = $('#modal-gallery-carousel').data('owlCarousel');
  owl.destroy();});

和JSON文件：

{

  // this corresponds to an id tag on the card

  "galeria1" : [
    {
        "img" : "images/buffet-ergo-1.jpg",
        "alt" : "Buffet Ergo"
    },
    {
        "img" : "images/buffet-ergo-1.jpg",
        "alt" : "Buffet Ergo"
    },
    {
        "img" : "images/buffet-ergo-1.jpg",
        "alt" : "Buffet Ergo"
    },
    {
        "img" : "images/buffet-ergo-1.jpg",
        "alt" : "Buffet Ergo"
    }
  ]
}

我试过重复相同的结构，但它没有工作;我认为如果我这样做，JSON就无效了。我该怎么办？

使用JSON和jQuery更新OwlCarousel的内容？

0 个答案: