Question

如何简化这两个单击函数并将其合并为一个，并使其可扩展以用于将来的表行类？我的代码可以运行，但是扩展性不是很好。

请参阅小提琴：https://jsfiddle.net/49hvfdje/10/

<!DOCTYPE html>
<html>
  <head>
    <style> .hidden { display: none; } </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $('a.click.a').click(function() {
          $('tr.a').toggleClass('hidden'); // toggleClass for A rows
          return false;
        });

        $('a.click.b').click(function() {
          $('tr.b').toggleClass('hidden'); // toggleClass for B rows
          return false;
        });
      });
    </script>
  </head>

  <body>
    <table>
      <tbody>
        <tr><td><a class='click a'>Toggle A Rows</a></td></tr>
        <tr class='hidden a'><td>Text</td></tr>
        <tr class='hidden a'><td>Text</td></tr>
        <tr class='hidden a'><td>Text</td></tr>

        <tr><td><a class='click b'>Toggle B Rows</a></td></tr>
        <tr class='hidden b'><td>Text</td></tr>
        <tr class='hidden b'><td>Text</td></tr>
        <tr class='hidden b'><td>Text</td></tr>
      </tbody>
    </table>
  </body>
</html>

合并点击功能和可扩展性

0 个答案: