Question

此代码可以正常运行。单击时，将突出显示包含特定值的所有单元格。然而，这些细胞的真实内容是动态的。行数和列数也是如此。如何使此代码动态化？（单元格内容始终是带有下划线的单个小写单词，因此可以将其用作有效的类值。）

<html>
<head>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
      $(".one").click(function(){
        $("td").removeClass("blue");
        $("td.one").addClass("blue");
      });

      $(".two").click(function(){
        $("td").removeClass("blue");
        $("td.two").addClass("blue");
      });

      $(".three").click(function(){
        $("td").removeClass("blue");
        $("td.three").addClass("blue");
      });
    });
    </script>

    <style type="text/css">
        .blue {background-color:lightblue;}
    </style>
</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>

Answer 1

如果您只想定位与被点击元素具有相同类名的元素，只需获取目标元素的类名，然后使用它来定位具有相同类名的其他元素：

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

在CSS文件中（使用将颜色与函数分开的有意义的类名。）

.highlighted {background-color:light blue;}

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

这是显示工作示例的a JSBin

onclick - 更改单元格背景颜色，但具有动态内容

1 个答案: