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

您可以在startsWith中使用css jquery属性，并相应地添加类，而不会进行任何循环。

＆＃13;

$(function() {
  $('[class^="rok"]').hover(function() {
    $('[class^="rok"]').css('background-color', 'yellow');
  }, function() {
    // on mouseout, reset the background colour
    $('[class^="rok"]').css('background-color', '');
  });
});

＆＃13;

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

＆＃13;

<强>更新

以下是使用css选择器作为同一班级的方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

请勿使用增量id或class属性。它们是一种反模式，导致更复杂的代码，更难维护，绝对没有任何好处。

鉴于问题中的JS / HTML示例，您似乎试图在悬停时突出显示列的单元格。因此，您可以使用index()元素和:nth-child选择器以更可靠和可扩展的方式使用它：

＆＃13;

$('table th, table td').hover(function() {
  var index = $(this).index() + 1;
  $(`table tr th:nth-child(${index}), table td:nth-child(${index})`).toggleClass('highlight');
});

＆＃13;

table {
  border-collapse: collapse;
}
td {
  padding: 5px;
}
.highlight {
  background-color: #CCC;
}

＆＃13;

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

＆＃13;

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);
  });
});

<强>演示

＆＃13;

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

＆＃13;

div[class^='rok'] {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 10px;
}

.rok2 {
  background-color: blue;
}

＆＃13;

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

＆＃13;

Answer 4

首先为所有元素提供相同的类

例如：

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

在悬停时更改课程背景

4 个答案: