滑らかなスライダがAPI jsonで初期化されていません

Question

滑らかなスライダをAPIに組み込もうとしていますが、何らかの理由で動作しません。

私が間違っているかどうかはわかりません。あなたが最初のスライダが「#test」何らかの理由「#cats」

をスライダー＃という名前の下にあるものと同じHTMLマークアップで動作ん見ることができます

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> 

猫は初期化されません。 idと "cats"のdivにappend（）を使って私と関係がありますか？

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

$(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')方法

を使用することができます #catsため slickプラグインを初期化する必要があります

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