1

我有一个列表，每个 li 都包含一个删除按钮，可以在单击时将其删除。我不知道为什么，但该按钮只能应用于列表中的第一项，但不能应用于其余的 li 框。想知道我哪里出错了。

以下是我的php代码脚本和javascript

foreach($biz_watchlist as $biz_watchlist1){
  echo '<li class="biz_watch">';
  echo '<table style="width:100%">';
  echo '<td style="width:50%">';
  echo $biz_watch_details['5'];
  echo ' | <a id="remove_watch">remove</a>';
  echo '</td>';
  echo '<td>';
  echo '<span style="float:right">'.$biz_watch_details['19'].'</span>';
  echo '</td>';
  echo '</table>';
  echo '</li>';
}

  <script type="text/javascript">
  $(document).ready(function(){
     $('#remove_watch').click(function(){
      $(this).closest('.biz_watch').fadeOut("slow");
     });
  });
  </script>
4

2 回答 2

3

$('#remove_watch')正在寻找身份证。这就是为什么你只得到第一个对象的结果。id 应该是唯一的。如果您想在多个地方使用它，请将其改为类。

 echo ' | <a id="remove_watch">remove</a>';

应该

 echo ' | <a class="remove_watch">remove</a>';

进而

$('.remove_watch').click(function(){
于 2012-05-12T08:03:50.197 回答
0

您在页面上重复 N 次的元素上使用了 id！根据 W3C HTML 规范，id 必须是唯一的。您不能拥有多个具有相同 id 的元素。如果你这样做了，那么对这些元素的操作是未定义的，这意味着每个浏览器在这种情况下都会表现不同。

相反，在重复的元素上使用一个类。类属性用于分组操作：

 $('.remove_watch').click(function(){
     $(this).closest('.biz_watch').fadeOut("slow");
 });


 <a class="remove_watch">remove</a>
于 2012-05-12T08:04:19.063 回答