Как сделать несколько счётчиков кликов?

267
30 марта 2018, 14:41

Через 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');
});
})
Answer 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

Answer 2

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

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>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
JSDoc: элемент массива
javascript

JSDoc: элемент массива

Приведу пример исходной структуры:

 188
Уникальные элементы [дубликат]
javascript

Уникальные элементы [дубликат]

На данный вопрос уже ответили:

 199
Javascript ES2015: работа import и export
javascript

Javascript ES2015: работа import и export

Приветствую

 251
api-maps.yandex.ru/2.1/?lang=ru_RU - net::ERR_ABORTED
javascript

api-maps.yandex.ru/2.1/?lang=ru_RU - net::ERR_ABORTED

Подскажите, почему

 583