文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >是否有更好的方法来做到这一点而不是使用addClass/removeClass？

问是否有更好的方法来做到这一点而不是使用addClass/removeClass？
EN

Stack Overflow用户
提问于 2015-09-09 21:05:08
回答 3查看 105关注 0票数 1

我在寻找一种不那么多余的方法：

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

我要这么做的方法很难看而且看起来很重复.但是..。它起作用了?我怎样才能改善这一点？

​

代码语言：javascript
复制
$(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");
  });
});
代码语言：javascript
复制
.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);
}
代码语言：javascript
复制
<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>

​

JSFiddle视图

我觉得这个问题也可能与如何设置表和创建类有关。我不确定我是否会用循环，数组，if语句来解决这个问题.我有点困惑。

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

javascript
jquery
click
addclass
removeclass
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-09-09 22:03:51

正如Pointy所评论的那样，您可以连锁jQuery选择器，这样您就不需要一次又一次地键入它们。

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

javascript如下所示：

代码语言：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，而不是：

代码语言：javascript
复制
.pkg-active

你写这个：

代码语言：javascript
复制
th.active, td.active {
    color: white !important;
}

此外，与其：

代码语言：javascript
复制
.pkg-1-active {
    background: rgba(249, 188, 26, 0.5);
}

你可以写这个

代码语言：javascript
复制
.pkg-1.active, td:nth-child(2).active {
    background: rgba(249,188,26,0.5);
}

这样，您的代码至少会有一点可读性。

为了进一步简化代码，并使其在某种程度上更加通用，您可以向按钮中添加一个btn切换类，还可以添加一个数据属性，其中包含要切换活动的列。然后，javascript将如下所示：

代码语言：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/

票数 1
EN

Stack Overflow用户

发布于 2015-09-09 21:55:17

在设置表时，可以使用它来修改单个列。

代码语言：javascript
复制
<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>

然后将类添加/移除到col中即可。我现在就帮你做个Codepen。

票数 2
EN

Stack Overflow用户

发布于 2015-09-09 22:19:47

一些战略性的使用类应该可以帮助你清理这个很多。

  1. 您希望为列设置类，以便摆脱疯狂的jQuery选择器。看来ViperCode在这方面有所帮助。
  2. 添加一个类(可能是"pkg-btn")，使您的包按钮全部共享。然后，您可以替换以下代码 $(.pkg-btn-sm).click(函数(){.pkg-btn-md，.pkg-btn-lg").addClass("pkg-btn-off")；$(".pkg-btn-sm").removeClass("pkg-btn-off")；} 就像 $(“.pkg-btn-sm”).click(函数(){.pkg-btn).addClass(“pkg-btn-off”)；$(此).removeClass(“pkg-btn-off”)；} 它是泛型的，并且可以作为一个函数被分解出来，所以您只需要 $(“..pkg btn-sm”).click(函数(){ selectPkgBtn()；//或您所称的函数}

不要忘记，您可以链接jQuery命令。

代码语言：javascript
复制
$(".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");

可以重构为

代码语言：javascript
复制
$(".pkg-1, .pkg tr td:nth-child(2)").addClass("pkg-1-active pkg-active").removeClass("pkg-off");
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32489154

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档