Javascript-如何访问特定按钮

Question

var id = '';
var result=[];
var url = "http://www.omdbapi.com/?type=movie&apikey="+api_key;


function handle(e){
  if(e.keyCode === 13){
    $("#form1").submit(function(event){
      event.preventDefault();
    })
    var search_value = $("#search").val();
    if(search_value==""){
      alert("Please enter a movie name!")
    }
    else{
    $.ajax({
    method: "GET",
    url: url+"&t="+search_value,
    success: function(data){
    id = data.Title
    result.push(`<div class="container resultcont">
              <img src="${data.Poster}" class="img-thumbnail poster float-left" width="150px" height="150px"/>
              <p>Title: ${data.Title}</p>
              <p> Genre: ${data.Genre}</p>
              <p> Release Date: ${data.Released}</p>
              <p> Runtime: ${data.Runtime}</p>
              <p>Ratings: ${data.imdbRating}</p>
              <button class="btn btn-dark btn-block" id="wlbtn ${id}" onclick="watchlist()">Add</button>
              </div>
              <br>`)
            
    parameter = parameter + `<div class="container resultcont">
                  <img src="${data.Poster}" class="img-thumbnail poster float-left" width="150px" height="150px"/>
                  <p>Title: ${data.Title}</p>
                  <p> Genre: ${data.Genre}</p>
                  <p> Release Date: ${data.Released}</p>
                  <p> Runtime: ${data.Runtime}</p>
                  <p>Ratings: ${data.imdbRating}</p>
                  </div>
                  <br>`

    $("#searchresultdiv").html(result)
    }
    })
    }
   
  }
}

function watchlist(){
  document.getElementById(id).setAttribute("style","display:none")
  var remove_btn = `<button class="btn btn-dark btn-block" float="right" id="wlbtn" onclick="removewatchlist()">Remove</button>`
  $("#watchlistdiv").html(parameter+remove_btn)
}

我将搜索结果推送到结果数组中。 所以每个结果都在一个 div resultcont 中。

所以我遇到的问题是，我想做一些特定于 resultcont 按钮的操作。 例如：

所以如果我点击 hulk 的添加按钮，只有那个 div 应该被添加到监视列表中。 如何只添加绿巨人的div而不添加复仇者的div

Answer 1

首先，我不建议您在 ID 中有空格，因此wlbtn ${id}变为wlbtn_${id}

您的监视列表中的第二个 function 您使用ID ，但 function 不知道对ID的引用同样适用于parameter

function watchlist(obj) {
  $(obj).prop("disabled", true);
  var remove_btn = `<button class="btn btn-dark btn-block" float="right" id="wlbtn" onclick="removewatchlist()">Remove</button>`
  $(obj).after(remove_btn)
}

演示

 function watchlist(obj) { $(obj).hide() var remove_btn = `<button class="btn btn-dark btn-block" float="right" id="` + $(obj).attr("id") + `_remove" onclick="removewatchlist(this)">Remove</button>` $(obj).after(remove_btn) $(obj).closest(".card").appendTo(".watchlist"); } function removewatchlist(obj){ $(obj).closest(".card").remove() }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div>HULK</div> <button class="btn btn-dark btn-block" id="wlbtn_1" onclick="watchlist(this)">Add hulk</button><br> </div> <div class="card"> <div>AVENGERS</div> <button class="btn btn-dark btn-block" id="wlbtn_2" onclick="watchlist(this)">Add Avengers</button><br> </div> <div class="watchlist"> <h2>Watchlist</h2> </div>