Как подсчитать одну конкретную плитку в сетке с элементами div одного класса ⇐ Jquery

[Anonymous]

Мы хотим подсчитать ячейки сетки, как в нижнем примере, но более эффективно. например, если мы хотим добавить 100 ячеек сетки вместо 9

console.log("connected"); вар clicks1 = 0, клики2 = 0, клики3 = 0, клики4 = 0, клики5 = 0, кликов6 = 0, клики7 = 0, клики8 = 0, клики9 = 0, я = 0; var clickcs = [клики1, клики2, клики3, клики4, клики5, клики6, клики7, клики8, клики9]; $(".grid-item").click(function() { клики1++; console.log("нажал " + clicks1); я = клики1 % 3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") } иначе, если (я === 2) { $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") } еще { $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) // нижний пример /* $("#grid1").click(function(){ клики1++; // console.log("нажал" + клики); я = кликов1%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid2").click(function(){ клики2++; // console.log("нажал" + клики); я = кликов2%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid3").click(function(){ клики3++; // console.log("нажал" + клики); я = кликов3%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid4").click(function(){ клики4++; // console.log("нажал" + клики); я = кликов4%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid5").click(function(){ клики5++; // console.log("нажал" + клики); я = кликов5%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid6").click(function(){ клики6++; // console.log("нажал" + клики); я = кликов6%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid7").click(function(){ клики7++; // console.log("нажал" + клики); я = кликов7%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid8").click(function(){ клики8++; // console.log("нажал" + клики); я = кликов8%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } }) $("#grid9").click(function(){ клики9++; // console.log("нажал" + клики); я = кликов9%3; если (я === 1) { $(this).removeClass("slika1") $(this).removeClass("slika3") $(this).addClass("slika2") }иначе если(я===2){ $(this).removeClass("slika2") $(this).removeClass("slika1") $(this).addClass("slika3") }еще{ $(this).removeClass("slika3") $(this).removeClass("slika2") $(this).addClass("slika1") } })*/ body { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; высота: 100вх; маржа: 0; } .main_container { ширина: 60%; высота: 80%; размер фона: обложка; фоновая позиция: центр; дисплей: сетка; столбцы-шаблона сетки: авто авто авто; позиция: абсолютная; } .grid-item { фоновое вложение: исправлено; непрозрачность: 1; граница: 1 пиксель сплошной rgba(0, 0, 0, 0,8); отступ: 20 пикселей; размер шрифта: 30 пикселей; выравнивание текста: по центру; размер фона: обложка; } .slika1 { фоновое изображение: url("/images/narava2.jpg"); } .slika2 { фоновое изображение: url("/images/cat.jpg"); } .slika3 { фоновое изображение: url("/images/food-spread.jpg"); головоломка 1 2 3 4 5 6 7 8 9

Проблема в том, что переменная, подсчитывающая клики, учитывается для каждого клика в элементе div, а не для конкретной плитки. Мы много чего перепробовали, но, к сожалению, так и не смогли разобраться.