Как убрать класс при зависании

Question

Я хотел бы установить класс aqua, зависнув от clicked ячеек.

Я пытаюсь получить first id, а затем изменить класс на hovering cells

Но я stacked removeclass когда hovering,

Мой желаемый результат - изменить класс с first на last hovered клеток.

Есть ли для них какой-либо метод?

Спасибо

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>

Answer 1

Вы должны объявить переменную first вне функции обработчика кликов. Вам также следует преобразовать строку id в число:

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>

Answer 2

Есть несколько способов сделать это. Но я попытался изменить ваш исходный код как можно меньше.

Во-первых, вам нужно преобразовать id (которые являются строками) в числа. Вы можете сделать это с parseInt. Потому что сравнивать 2 строки не правильно в этой ситуации. Потому что '2'<'10' вернет false. Сравнение строк происходит на символьной основе. Это означает, что каждый символ сравнивается с соответствующим символом из другой строки.

Таким образом, '2' больше, чем '10', потому что '2'> '1' в алфавитном порядке.

Во-вторых, вы должны удалить класс aqua из всех td при повторном нажатии на td.

В-третьих, вам не нужен al oop. Просто проверьте, больше ли текущий идентификатор hd td, чем тот, который вы щелкнули в первый раз, а затем добавьте класс.

$(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>