在foreach循環中多次調用Javascript函數

Question

我有一個foreach循環生成的搜索結果列表。 我試圖在每個結果中添加一個按鈕，在iframe窗口中打開每個搜索結果，但只有第一個結果有效，而不是其他結果。 我希望能夠在同一頁面中的iframe中打開一個或多個結果。 並能夠通過單擊另一個按鈕關閉它們。 有任何想法嗎？ 謝謝

     foreach($this->result['web']->results->result as $item) {
 echo "<ul>";
 echo "<li><a href='".$item->url."'>".$item->title."</a></li>";
 echo "<li>".$item->abstract."</li>";
 echo "<script>$(function(){
 $('#button').click(function(){
 if(!$('#iframe').length) {
 $('#iframeHolder').html('<iframe id=\"iframe\" src=\"".$item->url."\"    width=100% height=\"600\"></iframe>');
}
});   
});</script>";       
echo"<li><a id=\"button\">Open</a></li>";
echo"<div id='iframeHolder'></div>";
echo "</ul>";
}
return true;
}

Answer 1

您的方法存在許多問題，我將嘗試枚舉它們。

1. 您在DOM（ button ）中使用重復的 ID。 ID應該是唯一的 。
   使用類可重復性。 查看HTML規范以獲取更多信息。

2. 您的jQuery選擇器正在使用ID將click函數綁定到按鈕。
   每次添加按鈕時，都會將所有按鈕綁定到該功能。

3. 你應該有一個接收事件的通用點擊功能。
   檢查jQuery文檔，了解從事件中獲取被點擊元素的方法。

---

這只會對你有所幫助。 最后一英里包括將項目URL添加到您的button或li 。

我建議使用data-x屬性，你可以使用jQuery的#data()函數獲取（例如target.data('x') ）。 例如，為了避免將屬性值設置為項URL，請將其設置為數組索引。

最后，將script標記添加到DOM的末尾，或者包含在$(document).ready()調用中的頭/單獨文件中。 它最好只在一切完成加載后運行。