Як отримати JavaScript за допомогою GetElementByClass замість GetElementById за допомогою JavaScript?

Question 1

Я намагаюся перемикати видимість певних елементів DIV на веб-сайті залежно від класу кожного DIV. Я використовую базовий фрагмент JavaScript для їх перемикання. Проблема полягає в тому, що сценарій використовує лише те getElementById, що getElementByClassне підтримується в JavaScript. І, на жаль, я маю використовувати клас, а не ідентифікатор, щоб називати DIV, оскільки імена DIV динамічно генеруються моєю таблицею стилів XSLT, використовуючи певні імена категорій.

Я знаю, що певні браузери зараз підтримують getElementByClass, але оскільки Internet Explorer цього не робить, я не хочу йти цим шляхом.

Я знайшов сценарії, що використовують функції для отримання елементів за класом (наприклад, №8 на цій сторінці: http://www.dustindiaz.com/top-ten-javascript/ ), але я не можу зрозуміти, як їх інтегрувати з моїм сценарієм перемикання.

Ось HTML-код. Самі DIV відсутні, оскільки вони створюються при завантаженні сторінки за допомогою XML / XSLT.

Основне питання: Як отримати вказаний нижче сценарій Toggle для отримання елемента за класом замість отримання елемента за ідентифікатором?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

Question 2

Сучасні браузери мають підтримку document.getElementsByClassName. Ви можете побачити повну інформацію про те, які постачальники надають цю функцію на caniuse . Якщо ви хочете поширити підтримку на старіші браузери, ви можете розглянути механізм селектора, такий як той, що знаходиться у jQuery або polyfill.

Старіша відповідь

Ви захочете перевірити jQuery , який дозволить наступне:

$(".classname").hide(); // hides everything with class 'classname'

Google пропонує розміщений вихідний файл jQuery, так що ви можете посилатися на нього та швидко працювати. Включіть на свою сторінку наступне:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

getElementsByClassNameМетод тепер спочатку підтримується більшістю останніх версій Firefox, Safari, Chrome, IE і Opera, ви могли б зробити функцію , щоб перевірити , якщо уродженка реалізація доступна, в іншому випадку використовується метод Dustin Diaz:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

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

Використання:

function toggle_visibility(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';
     }
  }
}

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Актично, використовуючи getElementsByClassName, він повертає масив з декількох класів. Оскільки одне і те ж ім'я класу може бути використано у декількох екземплярах всередині однієї HTML-сторінки. Ми використовуємо ідентифікатор елементу масиву для націлювання на потрібний нам клас, у моєму випадку це перший екземпляр даного імені класу. Отже, я використовував [0]

Question 5

Використовуйте його для доступу до класу в Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

додаючи до відповіді CMS , це більш загальний підхід, toggle_visibilityяким я щойно користувався:

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

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

Question 7

Моє рішення:

Спочатку створіть теги "<style>" з ідентифікатором.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Потім я створюю функцію в JavaScript наступним чином:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

Працював для мене як оберіг.

Question 8

Додайте ідентифікатори в декларації класу

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";