無法使用API​​ json初始化滑動滑塊

Question

試圖將滑動滑塊與API結合，但出於某種原因，它不起作用。

不知道我是否做錯了什麼。

HTML

<div class="row"> 
    <div id="test"> 
    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div> 

    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div> 

    <div class="card top">Hello! My name is<div class="name">Izzy</div><div class="location">Alamo, CA</div><div class="sex-age">Female, adult</div></div> 
    </div> 
</div> 


<div class="row"> 
    <div id="cats"> 
    </div> 
</div> 

你可以看到第一個滑塊「#TEST」並用相同的HTML標記爲一個在底部命名工作「#cats」

出於某種原因，滑塊＃貓不會初始化。這是否與我使用append（）到ID爲「貓」的div？

JS

$(document).ready(function() { 

    $.getJSON("https://api.myjson.com/bins/187677", function(data){ 

    $.each(data.pets, function() { 

     var name = this["pet_name"]; 
     var sex = this["sex"]; 
     var age = this["age"]; 
     var state = this["addr_state_code"]; 
     var image = this ["large_results_photo_url"]; 
     var city = this ["addr_city"]; 

     if (sex = "m") { 
     sex = "Male"; 
     } 
     if (sex = "f") { 
     sex = "Female"; 
     } 

     $("#cats").append(
      "<div class='card top'>" + 
      "Hello! My name is"+ 
      "<div class='name'>" + name + "</div>" + 
      "<div class='location'>" + city + ", " +state + "</div>" + 
      "<div class='sex-age'>" + sex + ", " + age + "</div>" + 
      "</div>" 
    ); 


    }); 
    }); 

    $('#cats').slick(); 
    $('#test').slick(); 

}); 

感謝你在先進的！

Answer 1

您需要初始化slick插件爲#cats你在DOM插入相關的幻燈片後

$(document).ready(function() { 

     $.getJSON("https://api.myjson.com/bins/187677", function(data) { 

     $.each(data.pets, function() { 

      var name = this["pet_name"]; 
      var sex = this["sex"]; 
      var age = this["age"]; 
      var state = this["addr_state_code"]; 
      var image = this["large_results_photo_url"]; 
      var city = this["addr_city"]; 

      if (sex = "m") { 
      sex = "Male"; 
      } 
      if (sex = "f") { 
      sex = "Female"; 
      } 

      $("#cats").append(
      "<div class='card top'>" + 
      "Hello! My name is" + 
      "<div class='name'>" + name + "</div>" + 
      "<div class='location'>" + city + ", " + state + "</div>" + 
      "<div class='sex-age'>" + sex + ", " + age + "</div>" + 
      "</div>" 
     ); 
     }); 
     $('#cats').slick(); 
     }); 

     $('#test').slick(); 
}); 

---

另外，您可以更早初始化插件，並使用.slice('slickAdd', 'html node here')方法

$(document).ready(function() { 
    $('#test').slick(); 
    $('#cats').slick(); 
    $.getJSON("https://api.myjson.com/bins/187677", function(data) { 

     $.each(data.pets, function() { 

      var name = this["pet_name"]; 
      var sex = this["sex"]; 
      var age = this["age"]; 
      var state = this["addr_state_code"]; 
      var image = this["large_results_photo_url"]; 
      var city = this["addr_city"]; 

      if (sex = "m") { 
      sex = "Male"; 
      } 
      if (sex = "f") { 
      sex = "Female"; 
      } 

      $("#cats").slick('slickAdd', 
      "<div class='card top'>" + 
      "Hello! My name is" + 
      "<div class='name'>" + name + "</div>" + 
      "<div class='location'>" + city + ", " + state + "</div>" + 
      "<div class='sex-age'>" + sex + ", " + age + "</div>" + 
      "</div>" 
     ); 
     }); 
     }); 
});