电影搜索

Question

身体：

电影搜索

<!-- Movies will get dumped here -->
<div id="movies-view"></div>

<form id="movie-form">
  <label for="movie-input">Add a Movie Bro</label>
  <input type="text" id="movie-input">
  <br>

  <!-- Button triggers new movie to be added -->
  <input id="add-movie" type="submit" value="Add a Movie Bro">
</form>
<div id="movie-view"></div>

Javascript：

  var movies = ["The Matrix", "The Notebook", "Mr. Nobody", "The Lion King"];
  function renderButtons() {

    $("#movies-view").empty();
    for (var i = 0; i < movies.length; i++) {

      var a = $("<button>");

      a.addClass("movie");

      a.attr("data-name", movies[i]);

      a.text(movies[i]);

      $("#movies-view").append(a);

    }

  }
  // This function handles events where the add movie button is clicked
  $("#add-movie").on("click", function(event) {
    event.preventDefault();
    var movie = $("#movie-input").val();
    movies.push(movie);
    renderButtons();
    var queryURL = "https://www.omdbapi.com/?t=" + movie + "&y=&plot=short&apikey=trilogy";

     $.ajax({
      url:queryURL,
      method: "GET"
    }).then(function(response){
        $("#movie-view").text(JSON.stringify(response));

    })
  });

  $(".movie").on("click", function(event){
        var film = $(".movie").attr("data-name");

        var queryURL = "https://www.omdbapi.com/?t=" + film + "&y=&plot=short&apikey=trilogy";

        $.ajax({
        url:queryURL,
        method: "GET"
        }).then(function(response){
          $("#movie-view").text(JSON.stringify(response));

        })
  });
  renderButtons();

///我希望在点击电影标题按钮而不是“添加电影兄弟”按钮之后显示“电影视图” div上的电影数据。但是我不知道如何将“数据名称”属性放入“ .movie”按钮。我的主要问题是如何正确写出变量“电影”。什么需要进入它才能得到我想要的东西？看来一切都很好，但是

Answer 1

您可以使用$(".movie").on("click", function(event) { }) ...尽管需要注意的是，您需要将.on()函数包装在$(document).ready(function() { })内，因为在DOM创建之前创建了四个初始元素准备。您还需要使用事件委托和类似$("body").on("click", ".movie", function(event) { })之类的东西，才能触发对动态添加的按钮的单击。

这可以在以下方法中看到：

var movies = ["The Matrix", "The Notebook", "Mr. Nobody", "The Lion King"];

function renderButtons() {
  $("#movies-view").empty();
  for (var i = 0; i < movies.length; i++) {
    var a = $("<button>");
    a.addClass("movie");
    a.attr("data-name", movies[i]);
    a.text(movies[i]);
    $("#movies-view").append(a);
  }
}

// This function handles events where the add movie button is clicked
$("#add-movie").on("click", function(event) {
  event.preventDefault();
  var movie = $("#movie-input").val();
  movies.push(movie);
  renderButtons();
});

$(document).ready(function() {
  $("body").on("click", ".movie", function(event) {
    var film = $(this).attr("data-name");
    var queryURL = "https://www.omdbapi.com/?t=" + film + "&y=&plot=short&apikey=trilogy";
    $.ajax({
      url: queryURL,
      method: "GET"
    }).then(function(response) {
      $("#movie-view").text(JSON.stringify(response));
    })
  });
});

renderButtons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Movies will get dumped here -->
<div id="movies-view"></div>

<form id="movie-form">
  <label for="movie-input">Add a Movie Bro</label>
  <input type="text" id="movie-input">
  <br>

  <!-- Button triggers new movie to be added -->
  <input id="add-movie" type="submit" value="Add a Movie Bro">
</form>
<div id="movie-view"></div>

如何获得按钮功能的“数据名称”属性？

电影搜索

1 个答案: