javascript - 在 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 中使用了重复 ID(按钮)。 ID 应该唯一。
   使用类 实现可重复性。检查HTML specification了解更多信息。

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

3. 您应该有一个接收事件的通用点击函数。
   检查jQuery docs了解从事件中获取点击元素的方法。

---

这只会帮助你一点点。最后一英里包括将项目 URL 添加到您的 button 或 li。

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

最后，将您的 script 标记添加到 DOM 的末尾，或者添加到包含在 $(document).ready() 调用中的头部/单独文件中。最好只在所有内容加载完成后运行。