CODEWITHSUNDEEP
javascripthtmlcss
Heisenberg
Heisenberg

Reputation: 5299

How to remove class by hovering

I would like to set classaqua by hovering from clicked cells.

I attempt to getfirst id and then change class to hovering cells

But, I stacked removeclasswhen hovering,

My desired result is to change class fromfirstto last hoveredcells.

Are there any method for them?

Thanks

var first;
$(function() {
  $("td").click(function() {
    first = this.id;
    $(this).addClass("aqua");
    console.log(first);
  });
  
  $('td').hover(function() {
  const id = +$(this).attr('id');
  console.log(id);
    
   for(var j=first;j<=id;j++){
   $("#"+id).addClass("aqua");}
                  
});
});
.aqua{
  background-color: aqua;
}


td {
  padding: 5px
  transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

Upvotes: 0

Views: 82

Answers (2)

Mihai T
Mihai T

Reputation: 17697

THere are a bunch of ways to do this. But i tried to change your initial code as little as i could.

First, you need to convert the id ( which are strings ) to numbers. You can do that with parseInt. Because comparing 2 strings is not correct in this situation. Because '2'<'10' will return false. String comparison happens on character basis. Which mean each character is compared with the corresponding character from the other string.

So '2' is greater > than '10' because '2' > '1' in alphabetical order.

Second, You should remove the aqua class from all td when clicking again on a td.

Third, you do not need a loop. Just check if the current hovered td id is greater than the one you first clicked then add class.

$(function() {
  $("td").click(function() {
    const first = parseInt(this.id, 10);
    $(this).addClass("aqua");
    const notThisTd = $('td').not(this)
    notThisTd.removeClass("aqua");
    notThisTd.hover(function() {
      const id = parseInt(this.id, 10);
      if (id > first) {
        $(this).addClass("aqua");
      }

    });


  });
});
.aqua{
  background-color: aqua;
}


td {
  padding: 5px
  transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

You should declare the variable first outside of the click handler function. You also should convert the string id to number:

const id = Number($(this).attr('id'));


$(function() {
  var first;
  $("td").click(function() {
    first = this.id;
    $(this).addClass("aqua");
    console.log(first);
  });
  
  $('td').hover(function() {
    const id = Number($(this).attr('id'));
    console.log(id);

    for(var j = first;j <= id; j++){
      $("#"+id).addClass("aqua");
    }
  });
});
.aqua{
  background-color: aqua;
}


td {
  padding: 5px
  transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

Upvotes: 3

Related Questions