悬停时更改班级背景

Question

我有一个包含多个元素的表格，例如“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>

当我将鼠标悬停在其中一个元素上时，我想使用 SAME 类设置所有元素的背景。

Answer 1

您可以在jquery 中使用startsWith css 属性并相应地添加类而无需任何循环。

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

更新

以下是使用startswith 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>

Answer 2

试试这样的：

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

Answer 3

首先为所有元素赋予相同的类

例如：

   $('.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 number 将捕获您在班级名称中的数字 例如：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', '');
        });
 });

Answer 4

不要使用增量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>