2

Через php клики по кнопке сохраняются в текстовый документ.

Если одна кнопка на странице, то всё работает.

<a href="#" class="count">кнопка</a>

Как можно сделать много счётчиков на странице? Допустим добавлю я разные классы, а как в js их выполнять?

<a href="#" class="count_1">кнопка1</a>
<a href="#" class="count_2">кнопка2</a>
...

Не копировать же js 5000 раз и менять только count.

$(function(){
function get_counter(a,b){
    $.get('click_counter/index.php',{type:b,href:a.attr('href')},function(d){
        a.find('.click_counter').html(d);
    });
}
var click_trigger = ".count";
$(click_trigger).each(function(){
    $(this).append(" <span class='click_counter'></span>");
    get_counter($(this),'');
});
$('body').on("click",click_trigger,function(){
    get_counter($(this),'set');
});
})
4
  • А вы уверены, что вашим кнопкам нужны разные классы? Может навешивать один и тот же класс, но разные id? Решение конечно есть, но похоже на XY-проблему
    – yolosora
    29 мар 2018 в 6:20
  • Можно и разные id прописать, как в js это сделать?
    – steep
    29 мар 2018 в 6:22
  • можно через data например вот так ru.stackoverflow.com/a/806286/232932 да, определились бы вы, JavaScript вам нужен или JQuery, если второй, то для него есть специальный тег
    – qwabra
    29 мар 2018 в 6:22
  • Я там ничего не понял, как к моему js это применить? В ссылку поставлю data-id="001" и тд
    – steep
    29 мар 2018 в 6:26

2 ответа 2

1

как в JavaScript выбрать (найти) элементы по классу с использованием css selector ?

window.addEventListener('load',() => {
  let _NodeList = document.body.querySelectorAll('[class^=count]');
  console.log(_NodeList.length)
})
<a href="#" class="count">кнопка1</a>
<a href="#" class="count_1">кнопка1</a>
<a href="#" class="count_2">кнопка2</a>

список ссылок на документацию:

https://www.w3schools.com/cssref/css_selectors.asp https://developer.mozilla.org/ru/docs/Web/API/Document/querySelectorAll https://learn.javascript.ru/searching-elements-dom

3
  • тк автор использует jquery, добавлю, что аналогично и там - var click_trigger = "[class^=count]"; 29 мар 2018 в 4:40
  • Почему выводит Undefinded href
    – steep
    29 мар 2018 в 6:20
  • Он всё равно считает все счетчики как один
    – steep
    29 мар 2018 в 6:35
0

Можно вот так раздать ссылкам айдишники если нужно как-то идентифицировать, а работать с одним классом.

var count_btns = document.body.querySelectorAll('.count');

for (var i = 0; i < count_btns.length; i++) {
  count_btns[i].id = 'a' + i;
  count_btns[i].appendChild(document.createElement('span'));
  count_btns[i].onclick = handler;
}

function handler(event) {
  var span = event.target.querySelector('span');
  if (!span) span = event.target;
  var count = parseInt(span.innerText);
  span.innerText = Number.isNaN(count) ? 1 : ++count;
};
<a href="#" class="count">кнопка1 </a>
<a href="#" class="count">кнопка2 </a>
<a href="#" class="count">кнопка3 </a>

4
  • через data-id лучше бы. let id = event.srcElement.dataset.id
    – qwabra
    29 мар 2018 в 6:43
  • @qwabra ну это уже тонкости реализации, если гарантируется уникальность на странице, то все и так ок
    – yolosora
    29 мар 2018 в 6:50
  • У меня уже есть в ссылке id и data-id их менять нельзя, а только использовать можно.
    – steep
    29 мар 2018 в 16:43
  • @steep ну заведите любой кастомный атрибут
    – yolosora
    29 мар 2018 в 17:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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