静止状態からアニメート状態に切り替えることを試みています - giphy APIを使用

Question

私はブートキャンプにいますので、7週目から始まります。 APIの割り当てがあり、私はGiphy APIを使用することにしました。さて、私はjsonオブジェクトを持って、ボタンクリックでgifを表示している、アヤックスコールを作った。 GIFが読み込まれると、イメージをアニメートさせることができます。次にクリックすると、イメージは再び変化します。そのプロセスはそれ自体が広告の邪魔を繰り返すことができるはずです。私はそれが理にかなった方法を確立しました。しかし、私はクリックが現在書かれているように変更するURLを取得するように思えない。私は.splice URLを試して、concatを使用して更新されたURLを完成させました。しかし、私は次のクリック時に元の状態に戻すためのイメージをどのように取得するのか分からないようです...何時間もsoooooのためにこれに取り組んでいます、誰かが私に目を新しく貸してくれますか？

ここで、必要であれば、私のJSとjQuery

// $("#loadTimer, .buttonGallery, #btnGeneratingbtn").hide(); 
 
var topics = ["Brandon", "Biggie Smalls", "Dr. Seuss", "Paul McCartney", "John Lennon", "Will Ferrell", "Jimmy Fallon", "Chris Farley", "Dane Cook", "Eminem", "Nas", "Jay-Z", "Rakim", "William Shakespeare","Jim Morrison", "James Maynard", "Serj Tankian"]; 
 
var gifcount = 0; 
 
var gifLocation; 
 
var clickCount = 0; 
 

 
var buttonFactory = function() { 
 
    $(".buttonGallery").empty(); 
 

 
    for (i = 0; i < topics.length; i++) { 
 
     var imAbutton = $("<button>"); 
 
     imAbutton.addClass("yup"); 
 
     imAbutton.attr("data-name", topics[i]); 
 
     imAbutton.text(topics[i]); 
 
     $(".buttonGallery").append(imAbutton); 
 

 
    }}; 
 

 
buttonFactory(); 
 

 

 

 

 

 

 
$("#anotherButton").on("click", function(event) { 
 

 
     event.preventDefault(); 
 
     // This line grabs the input from the textbox 
 
     var onemorebutton = $("#user-input").val().trim(); 
 
     // Adding movie from the textbox to our array 
 
     topics.push(onemorebutton); 
 
     // Calling renderButtons which handles the processing of our movie array 
 
     buttonFactory(); 
 
     }); 
 

 

 
$(".yup").on("click", function(){ 
 
    
 

 
    
 
    $("#gif-Gallery").empty(); 
 
    var searchTermUpdate; 
 
    var searchTerm = $(this).attr("data-name"); 
 
     // removing white space between two-word strings, replacing with a "+" \\ 
 
searchTermUpdate = searchTerm.replace(/ +/g, "+"); 
 

 
    var queryURL = "http://api.giphy.com/v1/gifs/search?q=" + searchTermUpdate + "&api_key=dc6zaTOxFJmzC&limit=10"; 
 
    $.ajax({ 
 
     url: queryURL, 
 
     method: 'GET' 
 
    }).done(function(response) { 
 
     console.log(response); 
 
     
 
     var results = response.data; 
 
    
 
     for (var i = 0; i < results.length; i++){ 
 
      gifcount = gifLocation; 
 
      
 
      
 
      var gifDIV = $("<div class='unit' data-state='still'>"); 
 
      var pRating = $("<p>").text("Rating: " + results[i].rating); 
 
      var gifImg = $("<img id='gifimg' class='col-md-4'>"); 
 
      gifImg.attr("src", results[i].images.fixed_height_still.url); 
 
      gifImg.attr({'data-animate' : results[i].images.fixed_height.url}); 
 
      gifImg.attr({'data-state' : "still"}); 
 
      gifImg.attr({'data-still' : results[i].images.fixed_height_still.url}); 
 
      gifDIV.append(pRating); 
 
      gifDIV.append(gifImg); 
 
      gifDIV.append(gifLocation); 
 
      
 
      gifcount++; 
 

 
      
 

 
      // appending gif div to DOM \\ 
 
      if (results[i].rating !== "g" || "pg" || "pg-13" || "y"){ 
 
      $("#gif-Gallery").append(gifDIV); 
 
     }} 
 

 
     $(".unit").on("click", function(){ 
 

 

 
        var state = $(this).attr('data-state'); 
 
        
 
       
 
       if (state === "still") { 
 
     $(this).attr("src", $(this).attr("data-animate")); 
 
     $(this).attr("data-state", "animate"); 
 
     } else { 
 
     $(this).attr("src", $(this).attr("data-still")); 
 
     $(this).attr("data-state", "still"); 
 
     } 
 
     
 

 
      
 
// var imgPath = this.children[1].src; 
 
      
 
      clickCount++; 
 
      var a; 
 
      var b; 
 
      var c; 
 
      var d; 
 
      var f; 
 
      
 
        
 
        // if (clickCount % 2 === 0){ 
 
        
 
        // for (i=0; i < imgPath.length; i++){ 
 
        //  // locating index of underscore, storing that value in var a\\ 
 
        //  var a = imgPath.indexOf("_"); 
 
        //  // removing all characters to the right of the underscore \\ 
 
        //  var b = imgPath.slice(0, a); 
 
        //  f = b; 
 

 
        //  // setting var c to a string value of .gif \\ 
 
        //  var c = ".gif"; 
 
        //  // combining var b and var c to complete updated image path \\ 
 
        //  var d = b.concat(c); 
 
        //  } 
 
       
 
         // setting image url to animated url \\ 
 
        // $(gifImg).attr("src", d); 
 

 
         
 
        // this.children[1].src = d; 
 
}); 
 
    });});   //

、ここでは、HTMLである：

再び

<body> 
 
    <div class="jumbotron"> 
 
     <div class="container"> 
 
      <div class="myHeader"> 
 
       <h1>WordSmiths</h1> 
 
       <span class="text-muted" id="jtronText"> 
 
        <div id="sometimeGone">Sometimes</div><div id="loadTimer">someone opens their mouth and you can't help but to be dazzled with the magic.</div> 
 
       </span> 
 
       <p class="text-success" id="instructionsOne"> 
 
        Click a button, see what happens! 
 
       </p> 
 
       <p class="text-success" id="instructionsTwo"> 
 
        Now you can create your own buttons!!! 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div class="buttonGallery"></div> 
 
       <h4>Create buttons, find Gifs!: </h4> 
 
       <form id="btnGeneratingForm"> 
 
        <label for="input">Anything: </label> 
 
        <input type="text" id="user-input"> 
 
        <br> 
 
        <input type="submit" id="anotherButton" value="More buttons"> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <div id="gif-Gallery"></div> 
 
     </div> 
 
    </div>

、おかげで 前進！ Robert

Answer 1

私は実際に同じプロジェクトをやっています！私はそれをかなり似たようにしました。私は問題はあなたが子供の画像自体の代わりにイメージホルダーのdivにアニメーションsrcを追加しているかもしれないと思う。この行： $（this）.attr（ "src"、$（this）.attr（ "data-animate"））;

私はあなたに悩みを与えていますか？

プロジェクトの運が良ければ、それが助けてくれることを願っています。