Попытка переключения состояний изображения - с неподвижного на анимированное - с использованием API giphy

Question

Так что я нахожусь в буткемпе, чтобы начать 7-ю неделю. У нас есть назначение API, и я решил использовать Giphy API. Хорошо, я сделал вызов ajax, у меня есть объект json, я показываю картинки с нажатием кнопки. После загрузки картинки вы сможете оживить изображение, затем при следующем нажатии изображение снова станет неподвижным. процесс должен быть в состоянии повторить себя до тошноты. У меня есть способ, который имеет смысл; Тем не менее, я не могу заставить URL-адреса меняться при нажатии так, как это написано в данный момент. Я попытался.splice URL, и с помощью concat для завершения обновленного URL; тем не менее, я не могу понять, как вернуть изображение в прежнее состояние после следующего щелчка... работал над этим так много часов, кто-нибудь, пожалуйста, дайте мне свежий взгляд?

вот мои 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>

еще раз спасибо заранее! Роберт

Answer 1

Я на самом деле делаю тот же проект! Я сделал это довольно похожим способом. Я думаю, что проблема может заключаться в том, что вы добавляете анимированный src в div для держателя изображения вместо самого дочернего изображения. Эта строка: $(this).attr("src", $(this).attr("data-animate"));

Это то, что доставляет вам неприятности, я думаю.

Удачи в проекте, надеюсь, это поможет.