Đối với vòng lặp chỉ lặp lại một lần khi cố gắng loại bỏ các lớp khỏi các phần tử

Question

Trong Javascript, tôi có một chức năng sẽ tìm các phần tử trên trang có lớp "được kết nối" và khi một nút được nhấp vào các lớp cho các phần tử này sẽ bị xóa . Tôi đã viết mã này:

var prev_connected = document.getElementsByClassName("connected"); 
if (prev_connected.length > 0) { 
    for (var j = 0; j < prev_connected.length; j++) { 
     prev_connected[j].removeAttribute("class"); 
    } 
} 

Tuy nhiên, nó chỉ xóa thuộc tính lớp của phần tử "được kết nối" đầu tiên trên trang. Khi tôi có hai phần tử "kết nối", tôi đã xác nhận rằng mảng "prev_connected" giữ 2 giá trị, nhưng vì lý do nào đó vòng lặp for không bao giờ đạt đến giá trị thứ hai. Có điều gì tôi đang làm sai? Cảm ơn.

Answer 1

Kết quả của getElementsByClassName là sống, có nghĩa là khi bạn loại bỏ các lớp thuộc tính nó cũng sẽ loại bỏ yếu tố đó từ kết quả . Sử dụng querySelectorAll được hỗ trợ rộng rãi hơn và trả về một NodeList tĩnh.

Ngoài ra, bạn có thể dễ dàng lặp lại danh sách bằng cách sử dụng vòng lặp for ....

Tôi không khuyên bạn nên tạo một bản sao bổ sung của danh sách trực tiếp chỉ để làm cho nó tĩnh, bạn nên sử dụng một phương thức trả về một NodeList tĩnh thay thế.

var prev_connected = document.querySelectorAll(".connected"); 
 
document.getElementById('demo').onclick = function() { 
 
    for(var i in Object.keys(prev_connected)) { 
 
     prev_connected[i].removeAttribute("class"); 
 
    } 
 
}

.connected { 
 
    background: rgb(150,200,250); 
 
}

<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<div class="connected">Hello</div> 
 
<button id="demo">Remove the classes!</button>

Answer 2

Điều này là do prev_connected là danh sách phát trực tiếp. Khi bạn cập nhật phần tử với lớp đó, nó loại bỏ nó khỏi nodelist có nghĩa là độ dài của nodelist giảm một nghĩa là j đang cố gắng tìm phần tử 2 trong một nodelist có độ dài 1, đó là lý do tại sao nó không hoạt động sau lần đầu tiên lặp lại.

Bạn có thể thấy điều này xảy ra trong bảng điều khiển ở this demo.

Một cách để bạn có thể khắc phục điều này là bằng cách chuyển đổi các NodeList để một mảng:

var prev_connected = [].slice.call(document.getElementsByClassName("connected")); 

Answer 3

Bạn nên lặp theo hướng ngược lại và sử dụng elem[i].classList.remove('name') để loại bỏ tên lớp từ mỗi phần tử Demo

document.getElementById("button").onclick = function() { 
    var prev_connected = document.getElementsByClassName("connected"); 
    console.log(prev_connected); 
    for (var i = prev_connected.length - 1; i >= 0; i--) { 
     prev_connected[i].classList.remove("connected"); 
     console.log(i, prev_connected[i - 1]); 
    } 
} 

Có một câu trả lời: https://stackoverflow.com/a/14409442/4365315