在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应该是唯一。
   使用类别重复性。检查HTML specification了解更多信息。

2. 您的jQuery选择器正在使用ID将点击功能绑定到按钮。
   每次添加按钮时，都会将所有按钮绑定到该功能。

3. 你应该有收到事件一个通用点击功能。
   检查jQuery docs获取从事件中获取单击的元素的方法。

---

这只会帮助你一点点。最后一公里包括将商品网址添加到您的button或li。

我推荐使用data-x属性，您可以使用jQuery的#data()函数（例如target.data('x')）获取该属性。例如，为了避免将属性值设置为项目URL，请将其设置为数组索引。

最后，将您的script标记添加到DOM的末尾，或者在$(document).ready()呼叫中包裹的头部/单独文件中。最好如果它只在之后运行加载完毕。