更改悬停时的 class 背景

Question

我有 table，其中包含多个 class 元素，例如 'rok0'、'rok1'、'rok2' 等，我想更改所有元素的背景将鼠标悬停在其中任何一个上时具有相同的 class。我得到了这个功能：

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

此功能有效，但我想将它用于所有 classes，因此我想对其使用 for 循环，但不知何故它不起作用。

我试过这个：

$(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', '');
    });
  }); 
}

None 个正在工作，我不知道为什么，你能帮我吗？

编辑：我的例子 table:

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

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

Answer 1

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

Answer 2

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

$(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 选择器对相同 class 执行的操作。

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 3

尝试这样的事情：

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

首先对所有元素给予相同的 class

例如：

   $('.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 will capture the number you have in your class name for eg: rok1 will give you 1.

$(function() {
        $('.rok' + number).hover(function() {
          $('.rok' + number).css('background-color', 'yellow');
        }, function() {
          // on mouseout, reset the background colour
          $('.rok' + number).css('background-color', '');
        });
 });

更改悬停时的 class 背景

Change class background on hover

jquery

cycle

css-selectors