1

所以我在训练营，即将开始第 7 周。我们有一个 API 任务，我选择使用 Giphy API。好的，我已经进行了 ajax 调用，拥有了 json 对象，正在通过单击按钮显示 gif。加载 gif 文件后，您应该能够使图像动画化，然后在下一次单击时，图像再次变得静止。这个过程应该能够令人作呕地重复。我已经将它设置为有意义的方式；但是，我似乎无法在单击当前编写的方式时更改 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>

再次，提前感谢！罗伯特

4

1 回答 1

1

我实际上在做同样的项目！我做了一个非常相似的方式。我认为问题可能是您将动画 src 附加到图像持有者 div 而不是子图像本身。这一行： $(this).attr("src", $(this).attr("data-animate"));

我认为是什么给你带来了麻烦。

祝项目好运，我希望这会有所帮助。

于 2017-05-23T13:56:01.390 回答