JQuery .addClass和.removeClass无法在Chrome或Safari上运行

Question

我正在尝试使用按钮显示和隐藏div。此代码在Firefox和IE中运行良好，但出于某种原因，它无法在Chrome或Safari中运行。该网站正在使用Bootstrap。

function newAdd(addId, rowId) {
  var add = "#" + addId.id;
  var row = "#" + rowId.id;
  var nextNum = Number(add.charAt(4));
  nextNum++;
  var next = "#add" + nextNum;

  $(add).addClass("dontShow");
  $(next).removeClass("dontShow");
  $(row).removeClass("dontShow");
}

.dontShow {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="row1">
  <div class="col-sm-12 col-md-12">
    <div class="form-group">
      <label for="000-000">Item Name:</label>
      <br />
      <input type="text" class="form-control" value="">
    </div>
  </div>
</div>

<div class="row" id="add1">
  <div class="col-sm-1 col-md-1">&nbsp;</div>
  <div class="col-sm-2 col-md-2">
    <a onclick="newAdd(add1,row2)">
      <button class="btn" style="text-decoration: none; color: #ffffff;" id="add1" type="button">Add another item?</button>
    </a>
  </div>
  <div class="col-sm-9 col-md-9">&nbsp;</div>
</div>

<div class="row" id="row2">
  <div class="col-sm-12 col-md-12">
    <div class="form-group">
      <label for="000-000">Item Name:</label>
      <br />
      <input type="text" class="form-control" value="">
    </div>
  </div>
</div>

<div class="row" id="add2">
  <div class="col-sm-1 col-md-1">&nbsp;</div>
  <div class="col-sm-2 col-md-2">
    <a onclick="newAdd(add1,row2)">
      <button class="btn" style="text-decoration: none; color: #ffffff;" id="add1" type="button">Add another item?</button>
    </a>
  </div>
  <div class="col-sm-9 col-md-9">&nbsp;</div>
</div>

<div class="row" id="row3">
  <div class="col-sm-12 col-md-12">
    <div class="form-group">
      <label for="000-000">Item Name:</label>
      <br />
      <input type="text" class="form-control" value="">
    </div>
  </div>
</div>

那么应该发生的是，用户看到第一行和第一个按钮，其他一切都被隐藏了。他们填写第一行，然后单击按钮。单击时，按钮消失，下一行和下一个按钮出现，显示两行，底部有一个添加按钮。如果他们再次点击它，那么最后一行应该出现，添加按钮完全消失。

Answer 1

有两种解决方案可以达到效果。

解决方案1 ​​

您的代码中需要完成2个更新

在HTML中

像newAdd（'add1'，'row2'）这样的stirng应该有引号

在JS中，不需要addId.id

var add = "#" + addId;

解决方案2

没有HTML更新。仅在JS中，更新

var add = "#" + addId.id;

到

var add = "#" + addId[0].id;

解决方案1 ​​ - 您正在传递元素的ID并在javascript中访问它。

解决方案2 - 您正在传递HTML Object Collection，然后访问该元素及其id属性。

现在要采用哪种解决方案？

如果你只需要Id，你可以选择解决方案1，因为传递完整的集合只是为了提取id是没有意义的，否则只能使用相同的参数发送它们。

但是，如果您需要获取元素的其他属性，请转到解决方案2.

Answer 2

它在Chrome或Safari中无效的原因是add1，你传递给函数，即

addNew(add1, row1);

不是指单个元素，而是指元素集合：

为什么呢？因为您有多个具有相同ID的元素。 ID必须是唯一的！

另一方面，Firefox只使用该ID的第一个元素（这是我所期望的）。

有几种方法可以解决这个问题，其中一种方法在另一个答案中显示，但你绝对应该确保你只使用唯一的ID。我强烈建议您阅读jQuery的绑定事件处理程序：http://learn.jquery.com/events/event-basics/