Jquery onclick-更改单元格背景颜色，但使用动态内容_Jquery

Jquery onclick-更改单元格背景颜色，但使用动态内容

jquery

Jquery onclick-更改单元格背景颜色，但使用动态内容,jquery,Jquery,这段代码可以工作，并完成我想做的事情。单击时，包含特定值的所有单元格都会高亮显示。然而，这些细胞的真正内容是动态的。行数和列数也是如此。如何使代码动态化？（单元格内容始终是一个带有小写字母的单词，因此可以将其用作有效的类值。） $（文档）.ready（函数（）{ $（“.one”）。单击（函数（）{ $（“td”）.removeClass（“蓝色”）； $（“td.one”）.addClass（“蓝色”）； }); $（“.two”）。单击（函数（）{ $（“td”）.removeClas

这段代码可以工作，并完成我想做的事情。单击时，包含特定值的所有单元格都会高亮显示。然而，这些细胞的真正内容是动态的。行数和列数也是如此。如何使代码动态化？（单元格内容始终是一个带有小写字母的单词，因此可以将其用作有效的类值。）


$（文档）.ready（函数（）{
$（“.one”）。单击（函数（）{
$（“td”）.removeClass（“蓝色”）；
$（“td.one”）.addClass（“蓝色”）；
});
$（“.two”）。单击（函数（）{
$（“td”）.removeClass（“蓝色”）；
$（“td.2”）.addClass（“蓝色”）；
});
$（“.three”）。单击（函数（）{
$（“td”）.removeClass（“蓝色”）；
$（“td.three”）.addClass（“蓝色”）；
});
});
.blue{背景色：浅蓝色；}
一三二
223
三一

如果您只想以与单击的元素具有相同类名的元素为目标，只需获取目标元素的类名，然后使用该类名以具有相同类名的其他元素为目标：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
    <table border=1>
        <tr><td class="one">one</td>    <td class="three">three</td><td class="two">two</td>    </tr>
        <tr><td class="two">two</td>    <td class="two">two</td>    <td class="three">three</td></tr>
        <tr><td class="three">three</td><td class="one">one</td>    <td class="one">one</td>    </tr>
    </table>
</body>
</html>

还有Javascript：

$(function(){
  $("table td").on("click", function(e){
     $("table td").toggleClass("highlighted", false);
     var sel = $(e.target).attr("class").replace(/\b(\w+)/, '.$1');
     $(sel).toggleClass("highlighted", true);            
  });
});

下面是一个工作示例

.highlighted {background-color:light blue;}

$(function(){
  $("table td").on("click", function(e){
     $("table td").toggleClass("highlighted", false);
     var sel = $(e.target).attr("class").replace(/\b(\w+)/, '.$1');
     $(sel).toggleClass("highlighted", true);            
  });
});