为什么使用选择器JQuery show（）函数仅对一个（而不是全部）元素起作用？

Question

JSFiddle 。

在下面的SSCCE中，有一个<table>嵌套在另一个<table> 。

问题是关于#add按钮的click监听器。 具体来说，函数的最后一个if/else块。 当你运行该代码，请点击Add TextField按钮一次（或多次），你会看到#remove上的按钮show()应执行，只显示第一个匹配的选择 ，而不是两个（或他们全部。

理想情况下，应该为所有#remove选择器显示 Remove TextField 。

问题是为什么？ 我该如何解决？

 $(document).on("click", "button#add", function() { event.preventDefault(); var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent(); var lastTableRow = parentTable.children('tbody').children('tr:last'); //Adding the new row parentTable.children('tbody').append(lastTableRow.clone()); //Reset lastRow variable lastTableRow = parentTable.children('tbody').children('tr:last'); //Reset the fields lastTableRow.find('table tbody tr td input').each(function() { $(this).val(''); }); //update numberOfRows variable var numberOfRows = parentTable.children('tbody').children('tr').length; alert("numberOfRows:" + numberOfRows); //check if (!(numberOfRows > 1)) { $("#remove").hide(); } else { $("#remove").show(); } }); 

 #outer-table { padding: 20px; border: 3px solid pink; } #inner-table { border: 3px solid orange; } #remove { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="outer-table"> <tbody> <tr> <td> <table id="inner-table"> <tbody> <tr> <td> <p style="display:inline-block">Enter first complain:</p> <input type="text" /> </td> </tr> </tbody> <tfoot> <tr> <td> <button id="add">Add Textfield</button> <button id="remove">Remove Textfield</button> </td> </tr> </tfoot> </table> </td> </tr> </tbody> <tfoot> <tr> <td>Table Footer</td> </tr> </tfoot> </table> 

Answer 1

那是因为您将id用于一组对象。 每个文件的id应该是唯一的。 您应该改用类名。