Question

我正在尝试创建一个动态网页，其中填充了我选择的gif文件。下面是该页面的屏幕截图。

摘要：单击上方的按钮可获取giphy图像并显示在屏幕上。假设我单击Chris Pratt，它将在屏幕上显示Chris Pratt的所有图像。随后每次单击克里斯·普拉特（Chris Pratt），都应再抓取10张图像并追加到屏幕上。汤姆·克鲁斯（Tom Cruise）上的新单击将清空$（'＃actors-view'）并显示汤姆·克鲁斯的标志。再次单击“汤姆·克鲁斯”，应将10张图像附加到现有的“汤姆·克鲁斯”字样中。

问题：我遇到的问题是单击新按钮时需要清空$（'＃actors-view'）。当前，当$（'＃actors-view'）为空时，我叫https://api.giphy.com/v1/gifs/search?q=${actor}&api_key=[API_KEY]。这可以获取最初的数字。对同一按钮的每一次额外点击都会在屏幕上获取更多的信息。问题是，当我单击其他按钮时，将所有当前的图形添加到新的图形上。。例如，我将把Dwayne Johnson的所有图片与Chris Hemsworthh混合在一起。这不是我想要的。

#Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="assets/css/style.css"" />
    <title>Document</title>
  </head>
  <body class="container-fluid">
    <div class="row">
      <div class="mb-5" id="buttons-view"></div>
    </div>
    <div class="row mt-5">
      <div class="col-sm-9">
        <div id="actors-view"></div>
      </div>
      <div class="col-sm-3">
        <div class="input-group mb-2">
          <div class="input-group-prepend">
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="add-actor"
            >
              Add
            </button>
          </div>
          <input
            id="actor-input"
            class="form-control"
            type="text"
            placeholder="Add an actor"
            aria-describedby="basic-addon1"
          />
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="assets/javascript/app.js"></script>
  </body>
</html>


#app.js

    let topics = [
  'Tom Cruise',
  'Arnold Schwarzenegger',
  'Tom Hanks',
  'Chris Hemsworth',
  'Chris Pratt',
  'Dwayne Johnson',
  'Will Smith',
  'Vin Diesel',
  'Pamela Anderson',
  'Shahrukh khan',
  'Hrithik Roshan'
];

//initial call of the function to render the buttons on screen
renderButtons();

function renderButtons() {
  $('#buttons-view').empty();
  for (var i = 0; i < topics.length; i++) {
    var a = $('<button>');
    a.addClass('actor btn btn-info');
    a.attr('data-name', topics[i]);
    a.text(topics[i]);
    $('#buttons-view').append(a);
  }
}

function ajaxCall(queryURL) {
  $.ajax({
    url: queryURL,
    method: 'GET'
  }).then(function(response) {
    console.log(response);

    var actors = response.data;
    //for each of the JSON data
    actors.forEach(actor => {
      //grab the images.fixed_height.url
      imgURL = actor.images.downsized.url;
      //grab the rating
      rating = actor.rating;

      // Creating an element to have the rating displayed
      pOne = $('<p>').text('Rating: ' + rating);
      //create a new div
      giphyDiv = $("<div class='giphy'>");
      //append the p element to the giphyDiv
      giphyDiv.append(pOne);
      //create an image tag and define the src
      image = $('<img>').attr('src', imgURL);
      //append the image to the div
      giphyDiv.prepend(image);

      //append the div to the image in the div
      $('#actors-view').prepend(giphyDiv);
    });
  });
}

// Function for dumping the JSON content for each button into the div
function displayActorInfo() {
  var actor = $(this).attr('data-name');
  if ($('#actors-view').is(':empty')) {
    var queryURL = `https://api.giphy.com/v1/gifs/search?q=${actor}&api_key=API_KEY`;

    ajaxCall(queryURL);
  } else {
    var queryURL = `https://api.giphy.com/v1/gifs/search?q=${actor}&api_key=API_KEY&limit=10`;

    ajaxCall(queryURL);
  }
}

// This function handles events where one button is clicked
$('#add-actor').on('click', function(event) {
  event.preventDefault();
  // This line grabs the input from the textbox
  var actor = $('#actor-input')
    .val()
    .trim();
  //If there are text in thhe textbox then push it to the topics array
  if (actor) {
    topics.push(actor);
    console.log(topics);
  }
  //empty the value in the text-box
  $('#actor-input').val(' ');

  //call the function to re-render the buttons in the screen after the update
  renderButtons();
});

// Function for displaying the actors info
// Using $(document).on instead of $(".actor").on to add event listeners to dynamically generated elements
$(document).on('click', '.actor', displayActorInfo);

Answer 1

$(document).ready(function() {
   $('button').click(function() {
    if (
      $(this)
        .parent()
        .data('lastClicked')
    ) {
      lastActorButtonCLicked= $(this)
        .parent()
        .data('lastClicked');
    }
    $(this)
      .parent()
      .data('lastClicked', this.id);
  });
});

// Function for dumping the JSON content for each button into the div
function displayActorInfo() {
  var actor = $(this).attr('data-name');

  console.log(actor);
  console.log(lastActorButtonCLicked)

  if ($('#actors-view').is(':empty') || actor !== lastActorButtonCLicked) {
    var queryURL = `https://api.giphy.com/v1/gifs/search?q=${actor}&api_key=BkaUZZWcFij6J7AoQj3WtPb1R2p9O6V9`;

    imd = true;

    ajaxCall(queryURL, imd);
  } else {
    var queryURL = `https://api.giphy.com/v1/gifs/search?q=${actor}&api_key=BkaUZZWcFij6J7AoQj3WtPb1R2p9O6V9&limit=10`;
    imd = false;
    ajaxCall(queryURL, imd);
  }
}

跟踪单击了哪个按钮；如果当前单击的按钮与先前单击的按钮不同，则清除数据

1 个答案: