Question

我遇到的但似乎无法弄清的问题与我插入到queryURL中的“游戏”变量有关，它以未定义的形式返回，我不确定为什么。我认为无论该按钮的游戏文字是什么，它都应该会回来，但是看来我是错误的。我已经将我的代码与其他类似的代码进行了比较，它看起来大致相同，并且在该部分代码中直接相同。

    var games = ["Zelda", "Super Mario", "Sonic the Hedgehog"];
    var gameGif;

    function displayGameGif() {
   
       $("#gif-buttons").on("click", function(){
        var game = $(this).attr("data-game");
        var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + game + "&api_key=rI1IycXL1PKjHBOLNDpExvjGMTfQABIr&limit=10";
   
        $.ajax({
            url: queryURL,
            mathod: "GET"
        }).then(function(response) {
           console.log(queryURL);

           var results = response.data;
           for (var i = 0; i < results.length; i++) {
               var gameDiv = $("<div>");
               var p = $("<p>").text("Rating: " + results[i].rating);
               var gameImage = $("<img>")

               gameImage.attr("src", results[i].images.fixed_height.url);
           
               gameDiv.append(p);
               gameDiv.append(gameImage);
               $("#game-gifs").prepend(gameDiv);
           }
   

        });
   
        });
   
    };
   
    function renderButtons() {
        $("#gif-buttons").empty();
   
        for(var i = 0; i < games.length; i++) {
            var a = $("<button>");
               a.addClass("gif-btn");
               a.attr("data-game", games[i]);
               a.text(games[i]);
               $("#gif-buttons").append(a);
        }
    }
   
    $("#add-game").on("click", function(event) {
        event.preventDefault();
        var game = $("#game-input").val().trim();
        games.push(game);
        renderButtons();
   
    });
   
    $(document).on("click", ".gif-btn", displayGameGif);
   
   renderButtons();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <title>Video Game Gifs</title>
</head>


<body>
   <div class="container">
       <h1>Gif Search</h1>
  <!--buttons should go here-->
   <div id="gif-buttons"></div>   
   <!--gifs should go here-->
   <div id="game-gifs"></div>

   <form id="giphy-form">

       <label for="game-input">Add a Game</label>
       <input type="text" id="game-input"> 
       <br>
       <input id="add-game" type="submit" value="Submit">
   </form>

 </div>   
 <script src="assets/giphy.js"></script>
</body>
</html>

Answer 1

问题是您的按钮在执行click之前不会连接到任何实际的displayGameGif事件处理程序，并且在您单击按钮之前不会执行。因此，您只需单击第一个按钮即可将按钮连接到真实事件处理程序，然后单击第二个即可。

稍微移动事件绑定即可解决问题。

var games = ["Zelda", "Super Mario", "Sonic the Hedgehog"];
    var gameGif;


   
       $("#gif-buttons").on("click", function(){
        var game = $(this).attr("data-game");
        var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + game + "&api_key=rI1IycXL1PKjHBOLNDpExvjGMTfQABIr&limit=10";
   
        $.ajax({
            url: queryURL,
            mathod: "GET"
        }).then(function(response) {
           console.log(queryURL);

           var results = response.data;
           for (var i = 0; i < results.length; i++) {
               var gameDiv = $("<div>");
               var p = $("<p>").text("Rating: " + results[i].rating);
               var gameImage = $("<img>")

               gameImage.attr("src", results[i].images.fixed_height.url);
           
               gameDiv.append(p);
               gameDiv.append(gameImage);
               $("#game-gifs").prepend(gameDiv);
           }
   

        });
   
        });
   
 
   
    function renderButtons() {
        $("#gif-buttons").empty();
   
        for(var i = 0; i < games.length; i++) {
            var a = $("<button>");
               a.addClass("gif-btn");
               a.attr("data-game", games[i]);
               a.text(games[i]);
               $("#gif-buttons").append(a);
        }
    }
   
    $("#add-game").on("click", function(event) {
        event.preventDefault();
        var game = $("#game-input").val().trim();
        games.push(game);
        renderButtons();
   
    });
   

   
   renderButtons();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <title>Video Game Gifs</title>
</head>


<body>
   <div class="container">
       <h1>Gif Search</h1>
  <!--buttons should go here-->
   <div id="gif-buttons"></div>   
   <!--gifs should go here-->
   <div id="game-gifs"></div>

   <form id="giphy-form">

       <label for="game-input">Add a Game</label>
       <input type="text" id="game-input"> 
       <br>
       <input id="add-game" type="submit" value="Submit">
   </form>

 </div>   
 <script src="assets/giphy.js"></script>
</body>
</html>

Answer 2

我发现了我的问题，我正在将初始函数分配给div“ $（”＃gif-buttons“）。on（” click“，function（）{”，因此稍后尝试调用该函数时试图定位Div的按钮而不是按钮。

jQuery / ajax变量未定义

2 个答案: