时间戳

首页 > 解决方案 > 如何获取按钮功能的“数据名称”属性？

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

问题描述

身体：

电影搜索

<!-- 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上的电影数据在点击电影标题按钮后出现，而不是“添加电影兄弟”按钮。但我不知道如何将“数据名称”属性放入“.movi​​e”按钮。我的主要问题是如何正确写出变量“电影”。需要在里面做什么才能得到我想要的东西？看起来一切都很好，但是

标签： jquerybutton

解决方案

您可以使用$(".movie").on("click", function(event) { })...，但请注意，您需要将.on()函数包装在 a$(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>

推荐阅读