jQuery .addClass和.removeClass在Chrome或Safari上不起作用

Question

I'm trying to show and hide divs using a button. This code works just fine in Firefox and IE, but for some reason it's not working in Chrome or Safari. The site is using 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> 

So what should happen is, the user sees the first row and first button and everything else is hidden. They fill out the first row, then click on the button. When clicked, the button goes away and the next row and next button appear showing two rows with one add button at the bottom. If they click it again, then the last row should appear and the add button goes away completely.

Answer 1

There are 2 solutions possible to achieve the result.

Solution 1

There are 2 updates that need to be done in your code

In HTML

There should be quotes for stirngs like newAdd('add1','row2')

In JS, no need for addId.id

var add = "#" + addId;

Solution 2

No html update. Only in JS, update

var add = "#" + addId.id;

to

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

Solution 1 - You are passing the id of the element and accessing it in javascript.

Solution 2 - You are passing the HTML Object Collection and then accessing the element and its id property.

Now which solution to go for?

In case you only need Id, you can go for solution 1, as it makes no sense to pass the complete collection just to extract the id which can otherwise be send with the same parameters with just quotes around them.

However, if you need to get some other properties of the element, then go for solution 2.

Answer 2

The reason why it doesn't work in Chrome or Safari is that add1 , which you are passing to the function, ie

addNew(add1, row1);

does not refer to a single element, but to an element collection:

Why? Because you have multiple elements with the same ID. IDs have to be unique!

Firefox on the other hand simply takes the first element with that ID (which is what I would have expected).

---

There are a couple of ways to solve this, one of them shown in the other answer, but you should definitely ensure that you are only using unique IDs. I highly recommend to read up on binding event handlers with jQuery: http://learn.jquery.com/events/event-basics/