Ẩn tất cả các thành phần có cùng tên lớp?

Question

Tôi đang cố gắng ẩn các phần tử có cùng tên lớp (float_form), nhưng tôi cũng đang cố sử dụng tập lệnh bên dưới để hiển thị chúng (tất cả các lớp div float_form ban đầu bị ẩn). Tôi đã xem xét rất nhiều giải pháp jquery, nhưng tôi dường như không thể làm cho bất kỳ giải pháp nào trong số họ hoạt động được.

function show(a) { 
    var e = document.getElementById(a); 
    if (!e) 
     return true; 

    if (e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    return true; 
} 
​ 

Edit: Xin lỗi nếu nó không phải là rõ ràng, tôi không có ý định sử dụng Jquery (và tôi biết rằng đây không phải là jquery). Tôi đang tìm một cách để sử dụng javascript để nhận ra tên lớp lặp đi lặp lại mà không có trong style = display: none; mà không ảnh hưởng đến phần tử ID show/hide vì có một vòng lặp với id div làm khóa. Html cho div trông giống như dưới đây, với {item.ID} là một vòng lặp while.

<div class="float_form" id="{item.ID}" style="display: none;"> 

Answer 1

vanilla javascript

function toggle(className, displayState){ 
    var elements = document.getElementsByClassName(className) 

    for (var i = 0; i < elements.length; i++){ 
     elements[i].style.display = displayState; 
    } 
} 

toggle('float_form', 'block'); // Shows 
toggle('float_form', 'none'); // hides 

jQuery:

$('.float_form').show(); // Shows 
$('.float_form').hide(); // hides 

Answer 2

Hãy thử:

function showClass(a){ 
var e = []; 
var e = getElementsByClassName(a); 
for(i in e){ 
    if(!e[i])return true; 

    if(e[i].style.display=="none"){ 
     e[i].style.display="block" 
    } else { 
     e[i].style.display="none" 
    } 
} 
return true; 
} 

bản demo: showClass("float_form");

Answer 3

Nếu bạn đang xem xét jQuery, sau đó nó là tốt để biết rằng bạn có thể sử dụng một bộ chọn lớp bên trong các thông số của $ và gọi phương thức .hide().

$('.myClass').hide(); // all elements with the class myClass will hide. 

Nhưng nếu đó là một chuyển đổi bạn đang tìm kiếm, sử dụng .toggle();

Nhưng đây là quan điểm của tôi về một chuyển đổi tốt mà không sử dụng jQuery:

function toggle(selector) { 
    var nodes = document.querySelectorAll(selector), 
     node, 
     styleProperty = function(a, b) { 
     return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b]; 
     }; 

    [].forEach.call(nodes, function(a, b) { 
    node = a; 

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block'; 
    }); 

} 

toggle('.myClass'); 

Demo đây (Nhấn vào " Hiển thị "để chạy): http://jsbin.com/ofusad/2/edit#javascript,html