当在表行中选中复选框时，我试图使一组灰色图像与彩色图像切换。当再次取消选中该复选框时，此操作将相反。更改必须仅应用于该特定表行中的 img 元素。表行将动态生成，但将遵循此 DOM 结构。我已经研究过 .parent() .parentAll() 但这些似乎没有提供匹配项。如果在 jQuery 中不可能，我很乐意应用非 jQuery javascript，但如果可能的话我更愿意使用 jQuery
<html>
<head>
<meta charset="utf-8">
<title> Total Tutor </title>
<link type="text/css" rel="stylesheet" href="course.css">
<script src="../jquery.js"></script>
<style>
.color{display:none;}
.grey{display:block;}
</style>
</head>
<body>
<div>
<form>
<table id="units" >
<thead>
<tr>
<th>Units</th>
<th>Add Video</th>
<th>Add Worksheet</th>
<th>Add Quiz</th>
<th>Add Exam</th>
<th>Add Revision</th>
</tr>
</thead>
<tbody>
<!-- table rows will be dynamically generated based on a SQL query -->
<tr>
<td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 2.1.1.1</td>
<td class="unit_table"><img class="color" src="../images/video-selector-small.png"><img class="grey" disabled src="../images/video-selector-small-grey.png"></td>
<td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>
</tr>
<tr>
<td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 3.1.1.1</td>
<td class="unit_table"><img class="color" src="../images/video-selector-small.png"><img class="grey" disabled src="../images/video-selector-small-grey.png"></td>
<td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>
</tr>
</tbody>
</table>
<button type="submit" id="save_design_course" name="sent" value="save_design_course"><img src="../images/save.png"></button>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function()
{
$(".design_units").click(function ()
{
if ($(this).is(':checked'))
{
/*change all of the img elements of class grey to display: none
and change all img elements of class color to display:block*/
}
if (!$(this).is(':checked'))
{
/*change all of the img elements of class grey to display:block
and change all img elements of class color to display:none*/
}
});
</script>
最佳答案
脚本 block 中有很多语法错误。
您可以使用closest()并查找tr并访问颜色和灰色类
$(document).ready(function(){
$(".design_units").on('click',function(){
if ($(this).is(':checked')) {
/*change all of the img elements of class grey to display: none
and change all img elements of class color to display:block*/
$(this).closest('tr').find('.color').show();
$(this).closest('tr').find('.grey').hide();
}
if (!$(this).is(':checked')){
/*change all of the img elements of class grey to display:block
and change all img elements of class color to display:none*/
$(this).closest('tr').find('.color').hide();
$(this).closest('tr').find('.grey').show();
}
});
});
关于javascript - 如何使用 jQuery 更改与类条件匹配的直接 img 同级元素的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44511959/