Jenscript click Listener получение классов

Question

Я пытаюсь сделать легкую анимацию с помощью click eventlistener, но я хотел бы создать его, получая классы вместо ids. Я бы хотел, чтобы каждый раз, когда кто-то нажимал кнопку, чтобы открыть окно, и когда его снова нажмут, чтобы закрыть его. Я пробовал его с идентификаторами и его работой, но когда я использую только классы, это не делает. В чем проблема?

Спасибо. HTML код:

<div class = "box"></div> 
<button class = "btn">Click</button> 

CSS код:

body { 
    background:grey; 
} 

.box{ 
    width:0px; 
    height:0px; 
    background:orange; 
} 

.box.active { 
    width:300px; 
    height:300px; 
    background:orange; 
} 

Javascript код:

var btn = document.getElementsByClassName("btn"); 
btn.addEventListener("click", openFunction, false); 

function openFunction() { 
    var y = document.getElementsByClassName("box"); 

    if (y.className === "active"){ 
     y.className = ""; 
    }else{ 
     y.className = "active"; 
    } 
} 

Answer 1

Есть несколько вопросов.

1. document.getElementsByClassName возвращает массив, поэтому вам нужно получить доступ к массиву, чтобы добавить прослушиватель событий. Что-то вроде: btn[0].addEventListener
2. На openFunction() снова вам нужно получить доступ к возвращенному массиву getElementsByClassName.
3. Если классName активен, вы удаляете все классы из объекта, включая box класс. Поэтому, когда вы нажимаете снова, он не найдет этот элемент.

Проверить демо здесь ванильным JS:

var btn = document.getElementsByClassName("btn"); 
 
btn[0].addEventListener("click", openFunction, false); 
 

 
function openFunction() { 
 
    var y = document.getElementsByClassName("box"); 
 

 
    if (y[0].className === "box active"){ 
 
     y[0].className = "box"; 
 
    }else{ 
 
     y[0].className = "box active"; 
 
    } 
 
}

body { 
 
    background:grey; 
 
} 
 

 
.box{ 
 
    width:0px; 
 
    height:0px; 
 
    background:orange; 
 
} 
 

 
.box.active { 
 
    width:300px; 
 
    height:300px; 
 
    background:orange; 
 
}

<div class = "box"></div> 
 
<button class = "btn">Click</button>

Если вы хотите использовать Jquery вы можете попробовать toggleClass.

toggleClass: Это эквивалентно addClass, когда класс отсутствует, и removeClass, когда класс присутствует.

Answer 2

document.getElementsByClassName() возвращает htmlCollection, который не имеет метод addEventListener. Если у вас есть только один единственный элемент, рассмотреть, чтобы придать ему id и использовать тот же код, который вы имеете, но изменить все вхождения document.getElementsByClassName() к document.getElementById(), или использовать

document.getElementsByClassName()[0].addEventListener(...) 

Если у вас есть несколько элементов, вы хотите добавить event to, вам нужно будет пройти через них.

ID Пример:

<div id="box"></div> 
<button id="btn">Click</button> 

JS:

var btn = document.getElementById("btn"); 
btn.addEventListener("click", openFunction, false); 

function openFunction() { 
    var y = document.getElementById("box"); 

    if (y.className === "active"){ 
     y.className = ""; 
    }else{ 
     y.className = "active"; 
    } 
} 

Если вы хотите использовать его с классами, есть несколько вещей, чтобы рассмотреть. Как указано выше, вам нужно выбрать элемент или пропустить все, чтобы назначить прослушиватели событий или изменить их классы. Кроме того, если ваш код работает, он будет работать только один раз, поскольку вы переопределяете класс, если у него нет класса active. Ниже будет работать для вас:

var btn = document.getElementsByClassName("btn"); 
btn[0].addEventListener("click", openFunction, false); 

function openFunction() { 
    var y = document.getElementsByClassName("box")[0]; 

    if (y.classList.contains("active")){ 
     y.classList.remove("active"); 
    }else{ 
     y.classList.add("active"); 
    } 
} 

Или гораздо проще:

var btn = document.getElementsByClassName("btn"); 
btn[0].addEventListener("click", openFunction, false); 

function openFunction() { 
    var y = document.getElementsByClassName("box")[0]; 
    y.classList.toggle('acitve'); 
}  

Answer 3

Рассмотрим следующее, гораздо более эффективный/очиститель:

var btn = document.getElementsByClassName('btn'); 
var active = false; 
btn[0].addEventListener("click", openFunction, false); 

function openFunction() { 
    var y = document.getElementsByClassName("box"); 
    active = !active; 
    y[0].className = active ? 'box' : 'box active'; 
} 

Codepen

Link в случае, если кто-то интересно, как работает троичный оператор:

Conditional (ternary) Operator

condition ? expr1 : expr2 

Также хороший, прочитанный Дугласом С Рокфорд:

Code Conventions for the JavaScript Programming Language

Кроме того, здесь тест производительности в JsPerf.