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'）的搅拌报价

在JS中，不需要addId.id

var add = "#" + addId;

解决方案2

没有html更新。 仅在JS中更新

var add = "#" + addId.id;

至

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

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

解决方案2-您传递HTML对象集合，然后访问该元素及其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/