2012-10-09 39 views
6

Về cơ bản, tôi đang cố gắng tìm tất cả các phần tử có tên lớp cụ thể và chuyển đổi thành một lớp khác. Tôi có một chức năng khác để chuyển nó về tên lớp ban đầu. Đây là chức năng của tôi được kích hoạt với một onclick:Thay đổi lớp css cho tất cả các phần tử với lớp đã nói với Javascript

function showEventsAppliedTo() { 
    var myObj = document.getElementsByClassName('notApplied'); 
    while (myObj.length >= 0) { 
     myObj[0].className = 'mblListItem notAppliedOut'; 
    } 
    AppliedToButton.set('style', 'display:none;'); 
    EventListingButton.set('style', 'display:block;'); 
} 

Tôi gặp lỗi khi nói myObj [0] không xác định. Bất kỳ ý tưởng tại sao điều này đang xảy ra?

Lưu ý, chúng tôi đang sử dụng Dojo, do đó dòng cuối cùng của hàm. Tôi biết tôi có thể dễ dàng làm điều này với jQuery, nhưng chúng tôi không sử dụng nó và nó không có ý nghĩa để tải một khuôn khổ khác.

Cảm ơn trước sự giúp đỡ của bạn.

EDIT

Nhờ sự giúp đỡ từ Abhishek Mishra, tôi biến đổi như thế nào tôi xử lý vòng lặp này và tìm thấy một cách để làm điều đó với JUST Dojo, đó là những gì tôi ưa thích. Đây là mã:

function listingClassToggle() { 
    dojo.query(".notApplied").addClass("notAppliedOut"); 
    dojo.query(".notApplied").removeClass("notApplied"); 
} 

Mã đơn giản hơn và nhẹ hơn rất nhiều so với giải pháp trước đây của tôi. Cảm ơn tất cả sự giúp đỡ của bạn. Tôi mong điều này giúp được người nào khác.

+0

Bạn có thể lặp lại myObj bằng cách sử dụng 'forEach' của dojo, sau đó bạn sẽ không cần phải kiểm tra số không. http://dojotoolkit.org/reference-guide/1.7/dojo/forEach.html. Ngoài ra 'dojo.query' cho các truy vấn dựa trên css, mà sẽ là' dojo.query ('. NotApplied'); ' –

+0

Tôi tự hỏi liệu điều đó có chạy nhanh hơn phương pháp tôi đang sử dụng không? Câu trả lời dưới đây đã sửa nó, nhưng tôi cũng sẽ xem xét phương pháp này. Phương thức truy vấn đó có thể tốt hơn là getelement – chazthetic

+0

Tôi tin rằng 'truy vấn' của dojo sẽ tương thích hơn trên các trình duyệt. 'getElementsByClassName' là tốt, nhưng không hoạt động trong IE 7 và 8;) http://caniuse.com/#search=getElementsByClassName –

Trả lời

5

Chỉ nên kiểm tra > 0 không >= 0. Khi độ dài bằng 0, không có phần tử 0.

+0

Ồ vâng, đây là nó. '0' nghĩa là không còn phần tử nào! :-) Tôi đã suy nghĩ 'trong khi (myObj [0]) {...' –

+0

Điều đó sẽ giải thích lý do tại sao nó xuất hiện như chức năng đã làm tất cả mọi thứ một cách chính xác và ném một lỗi ở cuối. Điều đó đã làm điều đó, cảm ơn! – chazthetic

+0

Xem chỉnh sửa của tôi ở trên để xem cách thực hiện với chức năng Dojo thay vì chạy câu lệnh 'while' – chazthetic

Các vấn đề liên quan