有没有比使用 addClass/removeClass 更好的方法来做到这一点？

Question

我正在寻找一种冗余度较低的方法：

基本上，我有一些按钮可以切换 table 上的外观变化。如果您按下第一个按钮，则会选择第一列。如果按第二个，则选择第二列和第三列，依此类推。

我必须执行此操作的方法非常丑陋，而且看起来真的很重复......但是......它有效吗？我该如何改进？

$(document).ready(function() {
  $(".pkg-btn-sm").click(function() {
    $(".pkg-btn-md, .pkg-btn-lg").addClass("pkg-btn-off");
    $(".pkg-btn-sm").removeClass("pkg-btn-off");
    $(".pkg-1, .pkg tr td:nth-child(2)").addClass("pkg-1-active pkg-active");
    $(".pkg-1, .pkg tr td:nth-child(2)").removeClass("pkg-off");
    $(".pkg-2, .pkg tr td:nth-child(3), .pkg-3, .pkg tr td:nth-child(4), .pkg-4, .pkg tr td:nth-child(5), .pkg-5, .pkg tr td:nth-child(6)").addClass("pkg-off");
    $(".pkg-2, .pkg tr td:nth-child(3), .pkg-3, .pkg tr td:nth-child(4), .pkg-4, .pkg tr td:nth-child(5), .pkg-5, .pkg tr td:nth-child(6)").removeClass("pkg-active pkg-2-active pkg-3-active pkg-4-active pkg-5-active");
  });
  $(".pkg-btn-md").click(function() {
    $(".pkg-btn-sm, .pkg-btn-lg").addClass("pkg-btn-off");
    $(".pkg-btn-md").removeClass("pkg-btn-off");
    $(".pkg-2, .pkg tr td:nth-child(3)").addClass("pkg-2-active pkg-active");
    $(".pkg-3, .pkg tr td:nth-child(4)").addClass("pkg-3-active pkg-active");
    $(".pkg-2, .pkg tr td:nth-child(3), .pkg-3, .pkg tr td:nth-child(4)").removeClass("pkg-off");
    $(".pkg-1, .pkg tr td:nth-child(2), .pkg-4, .pkg tr td:nth-child(5), .pkg-5, .pkg tr td:nth-child(6)").addClass("pkg-off");
    $(".pkg-1, .pkg tr td:nth-child(2), .pkg-4, .pkg tr td:nth-child(5), .pkg-5, .pkg tr td:nth-child(6)").removeClass("pkg-active pkg-1-active pkg-4-active pkg-5-active");
  });
  $(".pkg-btn-lg").click(function() {
    $(".pkg-btn-sm, .pkg-btn-md").addClass("pkg-btn-off");
    $(".pkg-btn-lg").removeClass("pkg-btn-off");
    $(".pkg-4, .pkg tr td:nth-child(5)").addClass("pkg-4-active pkg-active");
    $(".pkg-5, .pkg tr td:nth-child(6)").addClass("pkg-5-active pkg-active");
    $(".pkg-5, .pkg tr td:nth-child(6), .pkg-4, .pkg tr td:nth-child(5)").removeClass("pkg-off");
    $(".pkg-1, .pkg tr td:nth-child(2), .pkg-2, .pkg tr td:nth-child(3), .pkg-3, .pkg tr td:nth-child(4)").addClass("pkg-off");
    $(".pkg-1, .pkg tr td:nth-child(2), .pkg-2, .pkg tr td:nth-child(3), .pkg-3, .pkg tr td:nth-child(4)").removeClass("pkg-active pkg-1-active pkg-2-active pkg-3-active");
  });
});

.pkg-btn-sm,
.pkg-btn-md,
.pkg-btn-lg {
  height: 45px;
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
  margin-right: 15px;
}
.pkg-btn-sm:focus,
.pkg-btn-md:focus,
.pkg-btn-lg:focus,
.pkg-form input:focus,
.pkg-form select:focus {
  box-shadow: none;
  border: none;
  outline: none;
}
.pkg-btn-off,
.pkg-btn-lg:hover,
.pkg-btn-md:hover,
.pkg-btn-sm:hover {
  color: white;
}
.pkg-btn-sm {
  background: #f9bc1a;
}
.pkg-btn-sm:hover {
  background: #cc9403;
}
.pkg-btn-md {
  background: #00b3e2;
}
.pkg-btn-md:hover {
  background: #2bd4fe;
}
.pkg-btn-lg {
  background: #a10104;
}
.pkg-btn-lg:hover {
  background: #e70308;
}
.pkg-btn-off {
  background: #a8a8a8;
}
/* Center all text in the form */

.pkg th,
.pkg td,
.pkg-ch,
.pkg-ch:before {
  text-align: center;
}
/* Style column headings */

.pkg th {
  font-size: 23px;
  padding-bottom: 15px;
}
/* Cell height and alignment */

.pkg td {
  height: 38px;
  vertical-align: center;
}
/* Check mark styling */

.pkg-ch:before {
  content: "\f00c";
  font-family: "FontAwesome";
  font-style: normal;
  font-size: 30px;
  top: 2px;
  position: relative;
}
/* Set the first column to a minimum width so it appears larger */

.pkg-ti-em {
  min-width: 200px;
}
/* The first column is always the title */

.pkg-ti,
.pkg tr td:nth-child(1) {
  text-align: left !important;
  font-size: 16px;
  padding-left: 10px;
}
/* Every odd row's title cell should have this background color */

.pkg tr:nth-child(odd) td:nth-child(1) {
  background: #f0f0e6;
}
/* Different color for even rows */

.pkg tr:nth-child(even) td:nth-child(1) {
  background: #e7e7db;
}
/* All even rows have a different background color*/

.pkg tr:nth-child(even) {
  background: #fafaf9;
}
/* The second column is the second package color, etc */

.pkg-active {
  color: white !important;
}
.pkg-off {
  color: #a8a8a8 !important;
}
.pkg-1,
.pkg-2,
.pkg-3,
.pkg-4,
.pkg-5 {
  padding-top: 10px;
}
.pkg-1,
.pkg tr td:nth-child(2) {
  color: #f9bc1a;
}
.pkg-1-active {
  background: rgba(249, 188, 26, 0.5);
}
.pkg-2,
.pkg tr td:nth-child(3) {
  color: #cd9500;
}
.pkg-2-active {
  background: rgba(205, 149, 0, 0.5);
}
.pkg-3,
.pkg tr td:nth-child(4) {
  color: #00b3e2;
}
.pkg-3-active {
  background: rgba(0, 179, 226, 0.5);
}
.pkg-4,
.pkg tr td:nth-child(5) {
  color: #e70308;
}
.pkg-4-active {
  background: rgba(231, 3, 8, 0.5);
}
.pkg-5,
.pkg tr td:nth-child(6) {
  color: #a10104;
}
.pkg-5-active {
  background: rgba(161, 1, 4, 0.5);
}

<link href="//www.myameriflex.com/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="//www.myameriflex.com/bootstrap/css/styles.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="w_mg">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h4>How many employees do you have?</h4>
        <button class="pkg-btn-sm">1-19</button>
        <button class="pkg-btn-md">20-49</button>
        <button class="pkg-btn-lg">50+</button>
      </div>
    </div>
  </div>
</section>
<section class="w_mg pkg_table">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <table class="pkg">
          <thead>
            <th class="pkg-ti-em col-lg-2 col-md-2 col-sm-2 col-xs-2">&nbsp;</th>
            <th class="pkg-1 col-lg-2 col-md-2 col-sm-2 col-xs-2">Focus</th>
            <th class="pkg-2 col-lg-2 col-md-2 col-sm-2 col-xs-2">Impact</th>
            <th class="pkg-3 col-lg-2 col-md-2 col-sm-2 col-xs-2">Boost</th>
            <th class="pkg-4 col-lg-2 col-md-2 col-sm-2 col-xs-2">Advantage</th>
            <th class="pkg-5 col-lg-2 col-md-2 col-sm-2 col-xs-2">Complete</th>
          </thead>
          <tr>
            <td>FSA / HRA Option</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>HSA / LPSA Option</td>
            <td><i class="pkg-ch"></i></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>Ameriflex Guarantee</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Free MPC</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>DCA</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>CRA</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>COBRA</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Time &amp; Labor Management</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>ACA Compliance</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>HR Anwer Link</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>HR on Demand</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>POP Plan</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>POP Document Services</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Discrimination Services</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Form 5500</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Wrap Doc</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>SPD</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>SBC</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>HIPAA CCC</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Direct Billing</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Leave Management</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
            <td><i class="pkg-ch"></i></td>
          </tr>
          <tr>
            <td>Payroll</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td><i class="pkg-ch"></i></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</section>

View on JSFiddle

我觉得这个问题也可能与我如何设置 table 和创建类有关。我不确定我是否会用一个循环、一个数组、一个 if 语句来解决这个问题……我有点难过。

我发现了其他关于 addClass() 和 removeClass() 的问题，但没有特别提到这个。如果有人问过这个问题，我深表歉意，我欢迎任何关于这个问题得到解答的方向，或者如果这是一个我错过的非常简单的解决方案！

Answer 1

当您设置 table 时，您可以用来修改个别列

<table class="pkg">
  <colgroup>
    <col span=1 class="labels">
    <col span=1 class="sml">
    <col span=2 class="med">
    <col span=2 class="lrg">
  </colgroup>
<!-- REST OF TABLE HERE -->
</table>

然后 add/remove 类到山口。我现在就为您开发 Codepen。

Answer 2

正如 Pointy 评论的那样，您可以链接 jQuery 选择器，这样您就不需要一遍又一遍地输入它们。

您可以做的另一件事是简化您需要添加以切换状态的 classes。

javascript 如下所示：

 $(document).ready(function () {
        $(".pkg-btn-sm").click(function() {
            $("th, td").addClass("pkg-off");
            $("th, td").removeClass("active");
            $(".pkg-btn-md, .pkg-btn-lg").addClass("pkg-btn-off");
            $(".pkg-btn-sm").removeClass("pkg-btn-off");
            $(".pkg-1, .pkg tr td:nth-child(2)").addClass("active").removeClass("pkg-off"); 
        });
        $(".pkg-btn-md").click(function() {
            $("th, td").addClass("pkg-off");
            $("th, td").removeClass("active");
            $(".pkg-btn-sm, .pkg-btn-lg").addClass("pkg-btn-off");
            $(".pkg-btn-md").removeClass("pkg-btn-off");
            $(".pkg-2, .pkg tr td:nth-child(3),.pkg-3, .pkg tr td:nth-child(4)").addClass("active").removeClass("pkg-off");

        });
        $(".pkg-btn-lg").click(function() {
            $("th, td").addClass("pkg-off");
            $("th, td").removeClass("active");
            $(".pkg-btn-sm, .pkg-btn-lg").addClass("pkg-btn-off");
            $(".pkg-btn-md").removeClass("pkg-btn-off");
            $(".pkg-4, .pkg tr td:nth-child(5),.pkg-5, .pkg tr td:nth-child(6)").addClass("active").removeClass("pkg-off");
        });
    });

并且必须将以下更改应用到您的 CSS 而不是：

.pkg-active

你这样写：

th.active, td.active {
    color: white !important;
}

此外代替：

.pkg-1-active {
    background: rgba(249, 188, 26, 0.5);
}

你可以这样写

.pkg-1.active, td:nth-child(2).active {
    background: rgba(249,188,26,0.5);
}

这样，您的代码至少变得更可读了一点

为了进一步简化您的代码并使其在某种程度上更通用，您可以向您的按钮添加一个 btn-toggle class 以及一个带有列的数据属性以切换活动状态。 javascript 看起来像这样：

$(document).ready(function () {
        $(".btn-toggle").click(function() {
            $("th, td").addClass("pkg-off").removeClass("active");
            $("th:nth-child(1), td:nth-child(1)").removeClass("pkg-off")
            $(".btn-toggle").addClass("pkg-btn-off");
            $(this).removeClass("pkg-btn-off");
            var rowsToToggle = $(this).data("toggle").split(",");
            for (var i = 0; i < rowsToToggle.length; i++)
            {
                $(".pkg td:nth-child("+ rowsToToggle[i]+ "),.pkg th:nth-child("+ rowsToToggle[i]+ ")").addClass("active").removeClass("pkg-off"); 
            }
        });
    });

而在您的 CSS 中，您只会使用 nth-child() 选择器。

完整示例在这里：https://jsfiddle.net/brr8y0np/

Answer 3

classes 的一些策略性使用应该可以帮助您清理它。

您想为列设置 classes 以摆脱疯狂的 jQuery 选择器。看来 ViperCode 正在为此提供帮助。

添加一个 class（可能 "pkg-btn"），您的包裹按钮都共享。然后您可以替换代码

$(".pkg-btn-sm").click(function() {
    $(".pkg-btn-md, .pkg-btn-lg").addClass("pkg-btn-off");
    $(".pkg-btn-sm").removeClass("pkg-btn-off");
}

类似

$(".pkg-btn-sm").click(function() {
    $(".pkg-btn).addClass("pkg-btn-off");
    $(this).removeClass("pkg-btn-off");
}

这是通用的，可以分解为一个函数，所以你只需要

$(".pkg-btn-sm").click(function() {
    selectPkgBtn(); // or whatever you called your function
}

别忘了您可以链接 jQuery 命令。

$(".pkg-1, .pkg tr td:nth-child(2)").addClass("pkg-1-active pkg-active");
$(".pkg-1, .pkg tr td:nth-child(2)").removeClass("pkg-off");

可以重构为

$(".pkg-1, .pkg tr td:nth-child(2)").addClass("pkg-1-active pkg-active").removeClass("pkg-off");

有没有比使用 addClass/removeClass 更好的方法来做到这一点？

Is there a better way to do this instead of using addClass/removeClass?

javascript

jquery

addclass

click

removeclass

classes 的一些策略性使用应该可以帮助您清理它。

别忘了您可以链接 jQuery 命令。