为什么JQuery show()函数只能在一个(而不是全部)元素上使用选择器?

时间:2016-05-03 21:27:25

标签: javascript jquery html css

JSFiddle

在以下SSCCE中,<table>嵌套在另一个<table>内。

问题是关于click按钮的#add监听器。具体来说,是函数的最后一个if/else块。当您运行此代码时,请单击Add TextField按钮一次(或多次),您将看到应#remove执行show()的{​​{1}}按钮仅显示 用于第一个匹配选择器,而不是两者(或全部)。

理想情况下,所有Remove TextField选择器的#remove显示

问题是为什么?我该如何解决这个问题?

$(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>

1 个答案:

答案 0 :(得分:5)

那是因为你正在使用id作为一组对象。每个文档id应该是唯一的。您应该使用类名。