How to remove class by hovering

Question

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>

Does this answer your question? [Is it possible to use jQuery .on and hover?](https://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover) — metaDesign, Mar 04 '20 at 12:02
Error in console: `"message": "Uncaught ReferenceError: first is not defined",` It is going to throw an error since first is very declared until it is clicked. So you should declare it. Also id is a string, not a number. — epascarello, Mar 04 '20 at 12:06

Mamun · Accepted Answer · 2020-03-04T12:09:04.577

3

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>

edited Mar 04 '20 at 12:09

answered Mar 04 '20 at 12:04

Mamun

66,969
9
47
59

click 2 and hover on 10, You need to convert the string to a number – epascarello Mar 04 '20 at 12:08
1

Thanks it is very clear , I would like to change class to `last hovered cells`,, if first = 2, and `last hovered cell`=5, even if `6` is hovered, 2,3,4,5 will be changed. – Heisenberg Mar 04 '20 at 12:14
what's the purpose of that `for` inside the hover function ? why not use a simple `if` ? – Mihai T Mar 04 '20 at 12:21

score 1 · Answer 2 · answered Mar 04 '20 at 12:16

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>

How to remove class by hovering

2 Answers2