为什么只有第一个按钮有效

Question

<script type="text/javascript">
$(document).ready(function(){  $("#hide").click(function(){  $("#addfav").hide(1000);  }); 
 $("#show").click(function(){  $("#addfav").show(1000);  });});</script>

<button id="show" type="button">显示</button>
<button id="show" type="button">显示</button>

我的页面是数据库循环输出，有很多这样的按钮。可是只有第一个有效。
请问怎样让每个按钮都有效。谢谢。

Answer 1

可以使用jquery里面的事件代理

 <button id="show" type="button">显示</button>
    <button id="show" type="button">显示</button>

    <script type="text/javascript">
      $(document).ready(function () {
        $( document ).on( "click", "[id=hide]", function() {
            $("#addfav").hide(1000);  // jQuery 1.7+
         });
         
        $( document ).on( "click", "[id=show]", function() {
             $("#addfav").show(1000);  // jQuery 1.7+
         });         
      });
    </script>

各个版本的写法不同参考链接 https://api.jquery.com/live/

Answer 2

一个比较简单的方法是你可以将 function(){ $("#addfav").show(1000); }) 单独抽取成一个 show() 方法，然后生成 <button> 标签时使用 onclick=show('addfav') 来传入要更新元素的标识。

<button type="button" onclick="show('addfav')">显示</button>

<script>
function show(eleId){
  $(`#${eleId}`).show(1000);
}
</script>