Javascript-如何訪問特定按鈕-有解無憂

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 >
              <img src="${data.Poster}"  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  id="wlbtn ${id}" onclick="watchlist()">Add</button>
              </div>
              <br>`)
            
    parameter = parameter   `<div >
                  <img src="${data.Poster}"  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  float="right" id="wlbtn" onclick="removewatchlist()">Remove</button>`
  $("#watchlistdiv").html(parameter remove_btn)
}

我正在將搜索結果推送到結果陣列中。所以每個結果都在一個 div resultcont 中。

所以我的問題是，我想做一些特定于 resultcont 按鈕的操作。例如： Javascript-如何訪問特定按鈕

所以如果我點擊綠巨人的添加按鈕，只有那個 div 應該被添加到監視串列中。如何只添加綠巨人的 div 而不添加復仇者的 div

uj5u.com熱心網友回復：

首先，我不建議您在 ID 中留有空格，這樣wlbtn ${id}就變成了wlbtn_${id}

您使用的監視串列函式中的第二個，ID但該函式不知道對ID相同的參考parameter

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

演示

顯示代碼片段

function watchlist(obj) {
  $(obj).hide()
  var remove_btn = `<button  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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366028.html

標籤：javascript 查询阿贾克斯

上一篇：彈出視窗顯示不正確

下一篇：使用javascript的可折疊元素如何默認折疊