JavaScript를 사용하여 클래스 이름별로 여러 HTML 요소의 가시성을 전환하는 방법은 무엇입니까?

JavaScript를 사용하여 클래스 이름별로 HTML 요소의 표시 여부를 전환하는 방법

웹 페이지에서 특정 DIV의 표시 여부를 동적으로 제어하려고 합니다. 그러나 현재 JavaScript 스크립트는 getElementById에 의존하는데, 이는 DIV가 ID가 아닌 클래스 이름으로 식별되므로 적합하지 않습니다.

이 문제를 극복하려면 최신 브라우저에서 지원되는 getElementsByClassName 메서드를 활용할 수 있습니다. . 포괄적인 솔루션은 다음과 같습니다.

function getElementsByClassName(node, className) {
  if (node.getElementsByClassName) {
    // Native implementation available
    return node.getElementsByClassName(className);
  } else {
    // Use fallback method
    return (function getElementsByClass(searchClass, node) {
      if (!node) node = document;
      var classElements = [],
          els = node.getElementsByTagName("*"),
          pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)");

      for (var i = 0, j = 0; i < els.length; i++) {
        if (pattern.test(els[i].className)) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    })(className, node);
  }
}

이제 getElementsByClassName을 사용하도록 토글 스크립트를 수정할 수 있습니다.

function toggleVisibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if (e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

이 업데이트된 스크립트를 사용하면 같은 반 이름.

위 내용은 JavaScript를 사용하여 클래스 이름별로 여러 HTML 요소의 가시성을 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!