Как сделать чтобы этот скрипт работал ко всем классам?

Question

[powercoder]

Как сделать, чтобы скрипт применялся ко всем button с классом .linkinp?
В моем коде около 50 button, но работает код работает только на первом.

jQuery(document).ready(function($) {
var btn = document.querySelector('.linkinp ');
btn.onclick = function(e) {
	var element = document.querySelector(".doght-03");
  if(element.classList.contains("show-block")) {
  	element.classList.remove("show-block");
  } else {
  	element.classList.add("show-block");
  }
}
});

Answer 1

[coderisimo]

метод querySelector() возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов.

а вам нужен getElementsByClassName()

Возвращает массивоподобный (итерируемый) объект всех дочерних элементов, соответствующих всем из указанных имен классов.

Comments

[QwertySon]

Так же можно использовать document.querySelectorAll, в случае, если нужен динамический тип селектора

[coderisimo]

QwertySon, согласен, можно , но getElementsByClassName быстрее. Так что, как всегда нужно смотреть по ситуации.

[HelpSophie]

coderisimo, querySelectorAll(".class") будет медленнее чем getElementsByClassName("class")?
Почему, если и то и другое по классу?
И вроде querySelectorAll более современный селектор.

[coderisimo]

HelpSophie, я же написал, что это не столь важно, однако если заморачиваться то

[HelpSophie]

coderisimo, зачем через атрибут-то?

[coderisimo]

HelpSophie, давайте дальше сами )))

[Пашенька]

HelpSophie, как минимум потому что querySelectorAll универсальный, а getElementsByClassName узконаправленный. Узконаправленное решение всегда быстрее универсального. А вообще они совершенно по-разному работают.

[HelpSophie]

like-a-boss, спасибо.
Где подробно можно почитать как именно они работают? Есть на примете ссылочка? (Мне не лень гуглить, вдруг в закладках есть толковая статья).
По логике и тот и другой ищут элементы с атрибутом класс (если querySelectorAll(.class) ) и проверяют соответствует ли он значению. А выходит что где-то что-то идет не так.

[Пашенька]

HelpSophie, https://learn.javascript.ru/searching-elements-int...

[Пашенька]

HelpSophie, найдут то они одинаково(если дерево документа не поменялось), но дело в том, что возвращают в разном виде и по разному принципу результат, ну и скорость сильно разная.

[HelpSophie]

like-a-boss, Спасибо!

[Пашенька]

HelpSophie, Не за что, изучайте)

Answer 2

[Somewhere Intech]

Ещё можно таким образом

jQuery(document).ready(function($) {
	document.addEventListener('click', function(e) {
  	if (!e.target.classList.contains("linkinp")) return;
  	var element = document.querySelector(".doght-03");
  	if(element.classList.contains("show-block")) {
  		element.classList.remove("show-block");
  	} else {
  		element.classList.add("show-block");
  	}
	});
});

Comments

[0xD34F]

Так как обработчик цепляется к document, ждать окончания загрузки нет необходимости - обёртка из ready тут лишняя.

Answer 3

[Ibishka]

document.querySelectorAll('.linkinp');