为什么JQueryshow(）函数只对带有选择器的一个(而不是所有）元素起作用

Why does JQuery show() function only work on one (rather than all) of elements with the selector?

本文关键字：一个 起作用 元素 选择器 函数 JQueryshow 为什么      更新时间：2023-09-26

JSFiddle。

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

问题是关于#add按钮的click侦听器。具体地说，是函数的最后一个if/else块。当您运行此代码时，单击Add TextField按钮一次（或多次），您将看到应该在其上执行show()的#remove按钮仅显示第一个匹配选择器的，而不是两者（或全部）。

理想情况下，对于所有#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>

这是因为您将id用于一组对象。id在每个文档中应该是唯一的。您应该使用类名。

相关文章：