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}

在您的监视列表函数中，您使用 ID 的第二个函数，但该函数不知道对 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>