CSS/Javascript Hiển thị/Ẩn DIV bằng lớp CSS?

Question

Tôi đã googled xung quanh và tìm thấy nhiều kịch bản để ẩn và hiển thị nội dung DIV, như một chuyển đổi trên nút bấm.

Nhưng chúng hoạt động bằng ID.

Tôi muốn làm điều tương tự NHƯNG Tôi muốn sử dụng một lớp thay vì một id để nếu tôi muốn có 20 DIV của chuyển đổi đó ... Ẩn/Hiện tôi không phải thêm mã phụ.

Dưới đây là một số mã:

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div> 

bất cứ ai có thể giúp với điều này xin vui lòng?

Cảm ơn

Answer 1

Có phải jquery là một tùy chọn không? Hy vọng như vậy, bởi vì đây không những gì bạn muốn:

http://api.jquery.com/toggle/

$(".class").toggle(); 
or 
$(".class").show(); $(".class").hide(); 

Answer 2

Này sẽ không chỉ được

$('.classname').hide(); 

Hoặc nhóm tất cả các yếu tố mà bạn muốn ẩn trong một div container, và sau đó ẩn div đó.

Answer 3

Sử dụng jQuery:

$(".classname").hide(); 

nơi classname là tên của lớp.

Answer 4

Sử dụng jQuery Selectors, bạn có thể tìm thấy một ID theo:

$("#id") 

Thay đổi đó để chọn các lớp học là tầm thường:

$(".className") 

Nếu không sử dụng jQuery, điều này không đáng kể, nhưng bạn có thể kiểm tra được SO câu hỏi đối với một số giúp đỡ:

How to getElementByClass instead of GetElementById with Javascript?

Answer 5

Bạn chỉ có thể sử dụng $(".className").hide();

Các $(".somthing") làm tương tự như $("#somthing"), ngoại trừ đó là cho một lớp học thay vì một ID.

Answer 6

Hầu hết các câu trả lời của jQuery nên khá dễ dàng, nhưng khi xem ví dụ của bạn ở dạng JS thông thường, dưới đây là cách thực hiện trong JS.

Nhược điểm tiềm ẩn: các trình duyệt không hỗ trợ getElementsByTagName. Tôi đã thử nghiệm IE7 và nó hoạt động, nhưng tôi không chắc chắn về thấp hơn.

var divs = document.getElementsByTagName('div'); 

var toggle = function() {  
    for (var i = 0, l = divs.length; i < l; i++) { 
     if (divs[i].getAttribute('class') == 'problem') 
      if (divs[i].style.display == 'none') divs[i].style.display = ''; 
      else divs[i].style.display = 'none'; 
    } 
} 

document.getElementById('Toggle').onclick = toggle; 

Hãy thử nó ra: http://jsfiddle.net/robert/PkHYf/

Answer 7

Như những người khác đã nói nhiều lần, điều này rất dễ dàng trong jQuery sử dụng một selector jquery và phương pháp .hide. Tuy nhiên, vì bạn đang hỏi một cách tổng quát và bạn nên biết cách thực hiện nó mà không có một khung công tác, đó không phải là một câu trả lời hoàn chỉnh.

Dưới đây là lựa chọn của bạn:

1. JQuery Method. Chỉ cần sử dụng bộ chọn jQuery và phương thức .hide().

   $ ("classname.") Ẩn()

2. Vanilla JS:. Động CSS. Một cách tiếp cận là để tự động thêm stylesheets tới đầu tài liệu - bạn có thể Alter CSS class attributes with javascript?

3. Vanilla JS: Sửa đổi CSS trực tiếp:

   var ss = document.styleSheets; 
       for (var i=0; i<ss.length; i++) { 
        var rules = ss[i].cssRules || ss[i].rules; 
   
        for (var j=0; j<rules.length; j++) { 
         if (rules[j].selectorText === ".classname") { 
          rules[j].style.visibility = "none"; 
         } 
        } 
       }