0

Здравствуйте. Возможно вопрос глуп, но все же. Как можно вызывать функцию при триггере клика через элементы с классом?

Например есть функция function a(){ some code...} и есть множество <span class="hop">BTN</span>, при клике на любой из элементов с классом hop вызывается функция a();.

Пробую так, но не срабатывает(в консоли нет ошибок):

function a(){
code...
}

let b = document.querySelectorAll('.hop');
for(var i = 0; i < b.length; i++){
  b[i].click = function(){a();}
}
<span class="hop">btn1</span>
<span class="hop">btn2</span>
<span class="hop">btn3</span>
<span class="hop">btn4</span>

    var sele = document.querySelectorAll('.swatch');

function www(){
    alert('wwwwwwwwwwwwwwww');
}
for (var i = 0; i < sele.length; i++) {
    sele[i].onclick = function (){www();}
}

Переформулирую вопрос.

Нужно добавить атрибут data для существующего span

Пробую это сделать так

var sel = document.querySelectorAll('span.selected');

    for (var i = 0; i < sel.length; i++) {
        sel[i].setAttribute('bme',"Color&size");
    }

Выполняться должно при клике на элементы с одним классом, пробую так

    var sele = document.querySelectorAll('.swatch');
for (var i = 0; i < sele.length; i++) {
    sele[i].onclick = function (){www();}
}

Массив sele при алерт в цикле вызова функции www(); не срабатывает

Полный код таков

var sele = document.querySelectorAll('.swatch');


function www(){
    alert('wwwwwwwwwwwwwwww');

    var sel = document.querySelectorAll('span.selected');

    for (var i = 0; i < sel.length; i++) {
        sel[i].setAttribute('bme',"Color&size");
    }
}
for (var i = 0; i < sele.length; i++) {
    sele[i].onclick = function (){www();}
}

Проблема в том, что функция не запускается. Нужно добавлять атрибут на элементы с классом selected (класс уже добавляется при клике на элемент)

1
  • 1
    b[i].addEventListener('click', a); и length, а не lenght
    – Deonis
    3 дек 2017 в 20:01

2 ответа 2

0

Добрый день

У вас ошибка в слове length

Всё просто:

const onClick = e => console.log(e);

document.querySelectorAll('.hop')
    .forEach(el => el.addEventListener('click', onClick));

https://jsfiddle.net/w4macw8d/

3
  • Вы можете воспользоваться "Фрагментом кода" 3 дек 2017 в 20:19
  • Здравствуйте! Спасибо, но ваш код, почему то не работает на моем сайте( 4 дек 2017 в 12:03
  • Советую открыть дебаггер в хроме и посмотреть где возникают проблемы 4 дек 2017 в 23:36
0

Надеюсь я тебя правильно понял....

var sele = document.querySelectorAll('.swatch');

for (let i = 0; i < sele.length; i++) {
  sele[i].addEventListener('click', function() {
    for (let i = 0; i < sele.length; i++) {
      sele[i].classList.remove('selected');
      sele[i].removeAttribute('bme');
    }
    this.classList.add('selected');
    this.setAttribute('bme', 'Color&size');
    console.log(sele)
  })
}
<span class="swatch">btn1</span>
<span class="swatch">btn2</span>
<span class="swatch">btn3</span>
<span class="swatch">btn4</span>

7
  • Про length это я опечатался тут) Ваш пример работает здесь, но аналогично на моем сайте он не работает, консоль молчит, класс вызывается верно, не было таких ситуаций? 3 дек 2017 в 20:37
  • а что в консоли? может ошибки? как понять здесь работает а на сайте нет?
    – Air
    3 дек 2017 в 20:40
  • Тут в смысле через кнопку "Выполнить код", а на сайте не работает в смысле при написании идентичного кода. В консоли нет ошибок(кроме не загруженной фотки, но это не то) 3 дек 2017 в 20:48
  • Влад, что бы понять, что именно не работает и почему, придется добавить пример когда который у тебя на сайте в вопрос...
    – Air
    3 дек 2017 в 20:50
  • Код добавил, но он аналогичен. Возможно вам будет проще посмотрев на сайте. Куда я могу скинуть ссылку? 3 дек 2017 в 20:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.