Изменить фон класса при наведении - PullRequest
Новая
       10

Изменить фон класса при наведении

0 голосов
/ 11 июня 2018

У меня есть таблица с несколькими элементами с таким классом, как 'rok0', 'rok1', 'rok2' и т. Д., И я хочу изменить фон всех элементов с одним и тем же классом при наведении курсора на любой из них.Я получил эту функцию: 

$(function() {
  $('.rok1').hover(function() {
    $('.rok1').css('background-color', 'yellow');
  }, function() {
    $('.rok1').css('background-color', '');
  });
});

Эта функция работает, но я хотел бы использовать ее для всех классов, поэтому я хочу использовать для нее цикл, но почему-то она не работает.

Я пробовал это: 

$(function() {
  for (i = 0; i < 20; i++) { 
    console.log('.rok'+i);
    $('.rok'+i).hover(function() {
      $('.rok'+i).css('background-color', 'yellow');
    }, function() {
      $('.rok'+i).css('background-color', '');
    });
  }
});

и это: 

for (i = 0; i < 20; i++) { 
  $(function() {
    console.log('.rok'+i);
    $('.rok'+i).hover(function() {
      $('.rok'+i).css('background-color', 'yellow');
    }, function() {
      $('.rok'+i).css('background-color', '');
    });
  }); 
}

Никто из них не работал, я понятия не имею, почему, вы можете мне помочь?

Редактировать: Пример моей таблицы: 

<table>
<tr>
<th class='rok0'>Col11</th>
<th class='rok1'>Col21</th>
<th class='rok2'>Col31</th>
</tr>
<tr>
<th class='rok0'>Col12</th>
<th class='rok1'>Col22</th>
<th class='rok2'>Col32</th>
</tr>
<tr>
<td class='rok0'>Col13</td>
<td class='rok1'>Col23</td>
<td class='rok2'>Col33</td>
</tr>
</table>

И я хочу установить фон для всех элементов с ЖЕ классом, когда наведу курсор на один из них.

Ответы [ 4 ]

0 голосов
/ 11 июня 2018

Сначала дайте один и тот же класс всем вашим элементам

Например, например: 

   $('.newClassHere').hover(function(){
    $($(this).attr('class').split(' ')).each(function() { 
        if (this !== '') {
            classes[this] = this;
        }    
    }); 
      classes.forEach(function(element){
        if(element.substring(0, 3) === 'rok')
           var number = element.substring(3,4);
      });
});

Число var будет захватывать число, которое вы указали в имени вашего класса, например: rok1 дастВы 1. 

$(function() {
        $('.rok' + number).hover(function() {
          $('.rok' + number).css('background-color', 'yellow');
        }, function() {
          // on mouseout, reset the background colour
          $('.rok' + number).css('background-color', '');
        });
 });
0 голосов
/ 11 июня 2018

Вы можете использовать атрибут startsWith css в jquery и добавлять классы соответствующим образом без зацикливания. 

$(function() {
  $('[class^="rok"]').hover(function() {
    $('[class^="rok"]').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $('[class^="rok"]').css('background-color', '');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rok1">
  Rok1
</div>

<div class="rok2">
  Rok2
</div>

<div class="rok3">
  Rok3
</div>

Обновление

Вот как вы можете это сделать для того же класса при запуске с css селектором. 

var currClass;

$(function() {
  $('[class^="rok"]').hover(function() {
    currClass = $(this).attr('class');
    $('.' + currClass).css('background-color', 'yellow');
  }, function() {
    currClass = $(this).attr('class');
    // on mouseout, reset the background colour
    $('.' + currClass).css('background-color', '');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class='rok0'>Col11</th>
    <th class='rok1'>Col21</th>
    <th class='rok2'>Col31</th>
  </tr>
  <tr>
    <th class='rok0'>Col12</th>
    <th class='rok1'>Col22</th>
    <th class='rok2'>Col32</th>
  </tr>
  <tr>
    <td class='rok0'>Col13</td>
    <td class='rok1'>Col23</td>
    <td class='rok2'>Col33</td>
  </tr>
</table>
0 голосов
/ 11 июня 2018

Попробуйте что-то вроде этого: 

$(function() {
  var color = "";
  $('div[class^="rok"]').hover(function() {
    color = $(this).css('background-color');
    $(this).css('background-color', 'yellow');
  }, function() {
    $(this).css('background-color', color);
  });
});

Демо 

$(function() {
  var color = "";
  $('div[class^="rok"]').hover(function() {
    color = $(this).css('background-color');
    $(this).css('background-color', 'yellow');
  }, function() {
    $(this).css('background-color', color);
  });
});
div[class^='rok'] {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

.rok2 {
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rok1"></div>
<div class="rok2"></div>
<div class="rok3"></div>
<div class="rok4"></div>
0 голосов
/ 11 июня 2018

Не используйте добавочные атрибуты id или class.Они являются антишаблоном, который приводит к более сложному коду, который труднее поддерживать без какой-либо выгоды.

Учитывая образец JS / HTML в вопросе, может показаться, что вы пытаетесь выделить ячейки столбца при наведении курсора.Таким образом, вы можете использовать index() элементов вместе с селектором :nth-child, чтобы сделать эту работу гораздо более надежной и расширяемой: 

$('table th, table td').hover(function() {
  var index = $(this).index() + 1;
  $(`table tr th:nth-child(${index}), table td:nth-child(${index})`).toggleClass('highlight');
});
table {
  border-collapse: collapse;
}
td {
  padding: 5px;
}
.highlight {
  background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col11</th>
    <th>Col21</th>
    <th>Col31</th>
  </tr>
  <tr>
    <th>Col12</th>
    <th>Col22</th>
    <th>Col32</th>
  </tr>
  <tr>
    <td>Col13</td>
    <td>Col23</td>
    <td>Col33</td>
  </tr>
  <tr>
    <td>Col14</td>
    <td>Col24</td>
    <td>Col34</td>
  </tr>
  <tr>
    <td>Col15</td>
    <td>Col25</td>
    <td>Col35</td>
  </tr>
</table>
...