jquery - 悬停时更改班级背景
问题描述
我有一个包含多个元素的表格,其类如'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 类设置所有元素的背景。
解决方案
您可以使用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>
更新
这是使用startswithcss
选择器对同一类进行的操作。
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>
推荐阅读
- php - Friendsofsymfony/http-cache-bundle 上的 Composer 更新错误
- python - 使用 PyAudio 和 scipy.signal 创建低通滤波器
- java - 带有浏览器堆栈的 BrowserMobProxy 没有拦截响应
- javascript - 这是什么科尔多瓦构建错误\ip-regex\index.js:3?
- typescript - 如何在 Firebase 函数中执行 firestore 查询?
- c# - 为 c# 项目中的资源添加链接的 msbuild 引发错误
- node.js - Dockerize meteor application
- security - 如何防止访问 weblogic 上的特定 JMS 队列
- reactjs - 如何从组件中检索状态
- angularjs - 通过 Jasmine Karma 运行测试用例时控制器未注册错误