使用 Json 获取未知路径

Question

[
  {
    "src" : "./images/slide-1.png",
    "alt" : "Slide one"
  },
  {
    "src" : "./images/slide-2.png",
    "alt" : "Slide two"
  },
  {
    "src" : "./images/slide-3.png",
    "alt" : "Slide three"
  },
  {
    "src" : "./images/slide-4.png",
    "alt" : "Slide four"
  }
]

//slide show
  var slides = $('.sidenav li');
  var slideIndex = 0;
  var slideTime = animate();

  slideTo(slides[0]);

  slides.click(function() {

    clearInterval(slideTime);
    slideTime = animate();

    var selectedIndex = $(this).index();
    var slide = slides[selectedIndex];
    slideTo(slide);

  });

  function slideTo(slide) {
    slides.removeClass("selected");
     $(slide).addClass("selected");
     slideIndex = jQuery(slide).index();
 }

  function animate() {
    return setInterval(function() {
              var slide = slides[slideIndex];
              slideTo(slide)
              slideIndex++;
              if (slideIndex == slides.length) {
                slideIndex = 0;
              }
          }, 3000);
  }

  //Json
  var image = $('.sidenav li');
  $.getJSON('http://localhost:8080/data.json', function(result){
    var i = 0;
    var j = 0;
    console.log(result);
    for (j = 0 ; j<result.length ; j++) {
      $('.sidenav').append('<li class="selected"><img src="" alt=""></li>');
    }

    image.each(function(e){
        $(this).find('img').attr('src',result[i].src);
        $(this).find('img').attr('alt',result[i].alt);
        i++;
    });
  });


<section class="section-slider">
    <div class="wrapper">
      <div class="content">
        <div class="inner-cont">
          <div class="title">
            <h1 class="black title-section">EXPECT NOTHING ORDINARY</h1>
          </div>
          <p class="txt black">
            Eastern & Oriental Plc is an AIM quoted real estate company, headquartered in the United Kingdom and focused on the development of residential and mixed-use assets in the London and the South East of England.
          </p>
          <div class="bot-link">
            <a href="javascript:;">VIEW OUR COMPANY PROFILE<span class="s s-right_arrow"><span class="hide">arrow</span></span></a>
          </div>
          <div class="anchor-sign">
            <a class="anchor-link" href="#s-three"><span class="s s-next"><span class="hide">arrow</span></span></a>
          </div>
        </div>
      </div>
      <div class="slider">
        <ul class="sidenav">
          <!-- <li class="selected"><img src=" " alt=""></li>
          <li><img src=" " alt=""></li>
          <li ><img src=" " alt=""></li>
          <li><img src=" " alt=""></li> -->
        </ul>
      </div>
    </div>
  </section>

我把代码放在第一位，所以现在我可以写问题了。我正在尝试制作幻灯片。正如您在.sidenav 中看到的，我有4 个<li> 元素被注释。它们应该用 Jquery 添加并用 JSON 填充。在 JSON 部分，我尝试为每个 img 创建一个 <li> ...在这种情况下有 4 个元素，并用 src 和 alt 填充它们。但是，我得到的只是空的。没有 。没有错误，但是当我检查是否添加了某些内容时，我可以看到：

为什么不知道？有什么想法吗？

Answer 1

由于我无法复制您的确切代码和值，我在下面做了一个简单的 sn-p。

我不知道你为什么使用i++，因为each函数有一个索引作为参数，你可以使用它。

在下面的 sn-p 中，一切正常（我认为）如您所料。

let result = [{
  "src": "./images/slide-1.png",
  "alt": "Slide one"
}, {
  "src": "./images/slide-2.png",
  "alt": "Slide two"
}, {
  "src": "./images/slide-3.png",
  "alt": "Slide three"
}, {
  "src": "./images/slide-4.png",
  "alt": "Slide four"
}, {
  "src": "./images/slide-5.png",
  "alt": "Slide five"
}, {
  "src": "./images/slide-6.png",
  "alt": "Slide six"
}];

for (i = 0; i < result.length; i++) {

  $('.image').append(`<li class="selected"><img src="${result[i].src}" alt="${result[i].alt}"></li>`);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class="image">

</ul>