Jquery - How to count a single specific tile in a grid with divs having the same class

cutiedark
December 5, 2023
209 views
2 votes
3 Answers

We want to count the grid tiles like in the bottom example, but in a more efficient way. like if we want to add 100 grid tiles instead of 9

console.log("connected");
var clicks1 = 0,
  clicks2 = 0,
  clicks3 = 0,
  clicks4 = 0,
  clicks5 = 0,
  clicks6 = 0,
  clicks7 = 0,
  clicks8 = 0,
  clicks9 = 0,
  i = 0;
var clikcs = [clicks1, clicks2, clicks3, clicks4, clicks5, clicks6, clicks7, clicks8, clicks9];

$(".grid-item").click(function() {
  clicks1++;

  console.log("clicked " + clicks1);
  i = clicks1 % 3;

  if (i === 1) {
    $(this).removeClass("slika1")
    $(this).removeClass("slika3")
    $(this).addClass("slika2")
  } else if (i === 2) {
    $(this).removeClass("slika2")
    $(this).removeClass("slika1")
    $(this).addClass("slika3")
  } else {
    $(this).removeClass("slika3")
    $(this).removeClass("slika2")
    $(this).addClass("slika1")
  }
})

// bottom example

/*
$("#grid1").click(function(){
    clicks1++;
    
    // console.log("clicked "+ clicks);
     i=clicks1%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})

$("#grid2").click(function(){
    clicks2++;
    
    // console.log("clicked "+ clicks);
     i=clicks2%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid3").click(function(){
    clicks3++;
    
    // console.log("clicked "+ clicks);
     i=clicks3%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid4").click(function(){
    clicks4++;
    
    // console.log("clicked "+ clicks);
     i=clicks4%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid5").click(function(){
    clicks5++;
    
    // console.log("clicked "+ clicks);
     i=clicks5%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid6").click(function(){
    clicks6++;
    
    // console.log("clicked "+ clicks);
     i=clicks6%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid7").click(function(){
    clicks7++;
    
    // console.log("clicked "+ clicks);
     i=clicks7%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid8").click(function(){
    clicks8++;
    
    // console.log("clicked "+ clicks);
     i=clicks8%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid9").click(function(){
    clicks9++;
    
    // console.log("clicked "+ clicks);
     i=clicks9%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})*/

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.main_container {
  width: 60%;
  height: 80%;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: auto auto auto;
  position: absolute;
}

.grid-item {
  background-attachment: fixed;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-size: cover;
}

.slika1 {
  background-image: url("/images/narava2.jpg");
}

.slika2 {
  background-image: url("/images/cat.jpg");
}

.slika3 {
  background-image: url("/images/food-spread.jpg");
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>puzzle</title>
</head>

<body>
  <div class="main_container">
    <div id="grid1" class="grid-item slika1">1</div>
    <div id="grid2" class="grid-item slika1">2</div>
    <div id="grid3" class="grid-item slika1">3</div>
    <div id="grid4" class="grid-item slika1">4</div>
    <div id="grid5" class="grid-item slika1">5</div>
    <div id="grid6" class="grid-item slika1">6</div>
    <div id="grid7" class="grid-item slika1">7</div>
    <div id="grid8" class="grid-item slika1">8</div>
    <div id="grid9" class="grid-item slika1">9</div>
  </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="js/script.js" type="text/javascript"></script>
</body>

</html>

The problem is that the variable that is counting the clicks is counted for every click in the div instead of for the specific tile. We tried a lot of things, but we couldn’t figure it out, sadly.

Answers

- DarshitShah
- December 5, 2023 at 12:36 am
- 0 votes
0
To handle the counting of clicks for specific grid tiles, you can modify the jQuery script to track individual counts for each tile clicked.

You have to adjust the script this way:
```
<script>
     var clickCounters = {};
    $(".grid-item").click(function() {
     var gridId = $(this).attr('id');
     console.log(gridId);
    if (!clickCounters[gridId]) {
      clickCounters[gridId] = '1';
    } else {
      clickCounters[gridId]++;
    }
    
    var currentCounter= clickCounters[gridId];
    

    console.log(currentCounter);
    if (currentCounter === 1) {
    $(this).removeClass("slika1")
    $(this).removeClass("slika3")
    $(this).addClass("slika2")
    } else if (currentCounter === 2) {
    $(this).removeClass("slika2")
    $(this).removeClass("slika1")
    $(this).addClass("slika3")
    } else {
    $(this).removeClass("slika3")
    $(this).removeClass("slika2")
    $(this).addClass("slika1")
    }
})
```
This script maintains a clicks object to store the number of clicks for each grid tile. When a grid tile is clicked, it checks the ID of that tile, increments the click count in the clicks object, and logs the number of clicks for that specific tile to the console.
Login or Signup to reply.

You could always use the html dataset to hold an element state. I also wrote a function which dynamically creates the grid items and appends it to the container. Hopefully this demo makes it clear one way to accomplish something like this 👍 If you have any questions about my demo always feel free to ask for clarification.

const get = query => [...document.querySelectorAll(query)];
const STARTING_GRID_COUNT = 9;
const gridContainer = get(".grid-container")[0];

const gridItemClicked = e => {
  const data = e.target.dataset;
  const gridNumber = data.count;
  const timesClicked = Number(data.timesClicked) + 1;
  e.target.dataset.timesClicked = timesClicked;
  console.log(`grid item ${gridNumber} clicked ${timesClicked} times`);
};

let gridItemCount = 0;
const createGridItem = () => {
  const gridItem = document.createElement("div");
  gridItem.classList.add("grid-item");
  gridItem.dataset.count = gridItemCount;
  gridItem.dataset.timesClicked = 0;
  gridItem.textContent = gridItemCount;
  gridItem.addEventListener(
    "click",
    gridItemClicked
  );
  gridContainer.appendChild(gridItem);
  gridItemCount++;
};

for (let i = 0; i < STARTING_GRID_COUNT; i++) {
  createGridItem();
}

get("button")[0].addEventListener("click", createGridItem);

.grid-container {
  display: inline-grid;
  --size: 30px;
  grid-template-columns:
    repeat(3, var(--size));
  border: 1px solid black;
}

.grid-container .grid-item {
  height: var(--size);
  width: var(--size);
  display: grid; place-items: center;
}

.grid-container .grid-item:hover {
  background: lightblue;
}

<div class="grid-container">
</div>
<button>Add Grid Item</button>

You can just save the values on the tiles and then IF you need them they are there, otherwise just toggle 0,1,2. I also added a second example where I did not toggle classes and just put values in the data attribute clickinstance – this could then have any number of values you desire. I used colors for the background (stoplight) and font color as I had no image reference to clearly show what was set to what.

Note I did a quick initialize to set the class and data attribute right at the end of the handler chain.

$(".main_container").on('click', ".grid-item", function() {
    const tile = this;
    let clickCount = tile.dataset.clickcount * 1;
    clickCount++
    tile.dataset.clickcount = clickCount;
    const i = clickCount % 3;
    tile.dataset.clickinstance = i;
    switch (i) {
      case 1:
        $(this).toggleClass("slika1 slika3", false)
          .toggleClass("slika2", true);
        break;
      case 2:
        $(this).toggleClass("slika2 slika1", false)
          .toggleClass("slika3", true);
        break;
      default:
        $(this).toggleClass("slika3 slika2", false)
          .toggleClass("slika1", true);
    }
  })
  .find(".grid-item").each(function() {
    this.dataset.clickcount = 0;
    this.dataset.clickinstance = 0;
  }).addClass('slika1');

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.main_container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid-item {
  background-attachment: fixed;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
  font-size: 2em;
  padding: 1em;
  background-size: cover;
}

.slika1 {
  background-color: #00FF0020;
}

.slika2 {
  background-color: #FFFF0020;
}

.slika3 {
  background-color: #FF000020;
}

.grid-item[data-clickinstance="0"] {
  color: #00FF00;
}

.grid-item[data-clickinstance="1"] {
  color: #0000FF;
}

.grid-item[data-clickinstance="2"] {
  color: #FF0000;
}


/*
.slika1 {
  background-image: url("/images/narava2.jpg");
}

.slika2 {
  background-image: url("/images/cat.jpg");
}

.slika3 {
  background-image: url("/images/food-spread.jpg");
}
*/

<div class="main_container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to count a single specific tile in a grid with divs having the same class

Answers