json - Slick Slider 未使用 API json 初始化

Question

尝试将光滑的 slider 与 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>

您可以看到第一个 slider “#test”与底部名为“#cats”的 slider 使用相同的 html 标记

由于某种原因， slider #cats 不会初始化。这与我使用append()到id为“cats”的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

在 DOM 中插入相关幻灯片后，您需要初始化 #cats 的 slick 插件

$(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>"
          );
        });
      });
 });