Làm thế nào để loại bỏ tất cả các trường hợp của một lớp trong javascript/jquery?

Question

Tôi có lớp này được gọi là .m-active được sử dụng nhiều lần trong suốt HTML của tôi. Về cơ bản những gì tôi muốn làm là loại bỏ tất cả các trường hợp của lớp đó khi người dùng nhấp vào một hình ảnh (mà không có lớp m-active) và thêm lớp m-active vào hình ảnh đó.

Ví dụ trong một hàng Backgrid bạn có thể có một handler nhấp chuột như sau:

"click": function() { 
    this.$el.addClass('m-active'); 
} 

Nhưng bạn cũng muốn loại bỏ lớp từ bất kỳ hàng mà nó đã được bổ sung trước đó, vì vậy mà chỉ có một hàng tại một thời gian có lớp .m hoạt động

Có ai biết cách này có thể được thực hiện trong javascript/jquery không?

Answer 1

Với jQuery:

$('.m-active').removeClass('m-active'); 

Giải thích:

• Calling $('.m-active') chọn tất cả các yếu tố từ các tài liệu có chứa lớp m-active
• Dù bạn chuỗi sau selector này được áp dụng cho tất cả các thành phần được chọn
• Chaining ca ll với removeClass('m-active') loại bỏ lớp m-active từ tất cả các thành phần được chọn

Đối với tài liệu về phương pháp cụ thể này, xem: http://api.jquery.com/removeClass/

Bắt nắm bắt toàn bộ điều selector với jQuery đang thách thức lúc đầu, nhưng một khi bạn nhận được nó, bạn thấy mọi thứ trong ánh sáng rất khác. Tôi khuyến khích bạn xem xét một số hướng dẫn jQuery tốt. Cá nhân tôi khuyên kiểm tra ra theo dõi jQuery Codeacademy của: http://www.codecademy.com/tracks/jquery

Answer 2

Jquery-:

$("class").removeClass("your class"); 

javascript-: Đặt tên lớp không có gì khi bạn muốn loại bỏ lớp trong javascript !!!

document.getElementById("your id").className = ""; 

hoặc

element.classList.remove("class name"); 

Answer 3

tất cả các câu trả lời chỉ để loại bỏ các lớp từ phần tử DOM. Nhưng nếu bạn đang yêu cầu để loại bỏ các yếu tố bản thân bạn có thể sử dụng .remove() phương pháp jquery

$('.m-active').remove(); 

JQuery Remove Docs

Answer 4

Cụ thể giải quyết các khối mã thêm để tăng cường chất lượng của các câu hỏi, và vay từ jsalonen:

"click": function() { 
    $('.m-active').removeClass('m-active'); 
    this.$el.addClass('m-active'); 
}