jQuery-单元素上的toggleClass和removeClass功能

Question

我正在尝试创建一个模板，该模板展示了不同的CSS规则以及它们在应用时如何影响元素。我想在多个页面上使用此模板，因此我想链接一个脚本。因此，我试图避免在JS中使用确切的类名。这是我所拥有的：

// Show active change
$('.button').click(function(){
    $(this).toggleClass("active");
});

// Apply changes on click
$(document).ready(function() {
   $("#buttons li").each(function(i) {
      $(this).attr('id', "choice-" + (i+1)).click(function () {
         $( ".to-change" ).toggleClass("change-" + (i+1));
      });
   });
});

/*Global*/
body {
   overflow-y: scroll;
}
header {
   font-family: 'Lato', sans-serif;
   background-color: #F5F5F5;
   text-align: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 2em 0;
}
main {
   padding-top: 9em;
}

/*Header Title*/
#title {
  margin: auto;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .5em;
}

/*Selections*/
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
ul li {
   display:inline;
}
.button {
  background-color: #E95420;
  border: none;
  color: white;
  letter-spacing: 1px;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: .8em;
  margin: 0.3em;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:nth-of-type(1) {
  background-color: white; 
  color: black; 
  border: 2px solid #E95420;
}
.button:nth-of-type(1):hover {
  background-color: #E95420;
  color: white;
}
.button:nth-of-type(1).active {
  background-color: #E95420;
  color: white;
}
.button:nth-of-type(2) {
  background-color: white; 
  color: black; 
  border: 2px solid #38b44a;
}
.button:nth-of-type(2):hover {
  background-color: #38b44a;
  color: white;
}
.button:nth-of-type(2).active {
  background-color: #38b44a;
  color: white;
}
.button:nth-of-type(3) {
  background-color: white; 
  color: black; 
  border: 2px solid #772953;
}
.button:nth-of-type(3):hover {
  background-color: #772953;
  color: white;
}
.button:nth-of-type(3).active {
  background-color: #772953;
  color: white;
}

/* Example changes made to element on click: */
#test * {    
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.change-1 {
  font-size: 1.5em;
}
.change-2 {
  text-decoration: line-through;
}
.change-3 {
  color: darkgray;
}

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


<header id="toggles">
   <h1 id="title">Buttons</h1>
   <ul id="buttons">
      <li class="button">Change 1</li>
      <li class="button">Change 2</li> 
      <li class="button">Change 3</li>
   </ul>
</header>

<main id="test">
   <p class="to-change">Lorem ipsum dolor sit amet.</p>
</main>

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

我想要的是让用户能够打开/关闭单个按钮 或 。单击另一个选项以覆盖以前添加的类。上面的代码段是一个修复程序，对其进行了设置，以使类可以堆叠，但是我希望随时仅对元素进行一项更改-单击另一个“更改”按钮应关闭任何以前应用的类。

根据我对JS和JQuery的理解（，什么都不是，），我应该能够使用removeClass().addClass()，但这是行不通的：

$( ".to-change" ).removeClass().addClass("change-" + (i+1));
//or
$( ".to-change" ).removeClass().toggleClass("change-" + (i+1));

我在点击时获得了一个应用的更改，仅此而已。

我如何设置它，以便在单击按钮时添加新的班级之前将其删除？

请注意：我的JS是科学怪人。我真的不知道我在这里做什么。谢谢您的帮助！

Answer 1

removeClass()不起作用的原因是，它也删除了原始类to-change

然后下次您使用$('.to-change')查找该元素时，不存在此类

将其重新添加到addClass()中可以使其正常工作

// Show active change
$('.button').click(function(){
    $(this).toggleClass("active");
});

// Apply changes on click
$(document).ready(function() {
   $("#buttons li").each(function(i) {
      $(this).attr('id', "choice-" + (i+1)).click(function () {
         $( ".to-change").removeClass().addClass("to-change change-" + (i+1));
      });
   });
});

/*Global*/
body {
   overflow-y: scroll;
}
header {
   font-family: 'Lato', sans-serif;
   background-color: #F5F5F5;
   text-align: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 2em 0;
}
main {
   padding-top: 9em;
}

/*Header Title*/
#title {
  margin: auto;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .5em;
}

/*Selections*/
ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
ul li {
   display:inline;
}
.button {
  background-color: #E95420;
  border: none;
  color: white;
  letter-spacing: 1px;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: .8em;
  margin: 0.3em;
  cursor: pointer;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:nth-of-type(1) {
  background-color: white; 
  color: black; 
  border: 2px solid #E95420;
}
.button:nth-of-type(1):hover {
  background-color: #E95420;
  color: white;
}
.button:nth-of-type(1).active {
  background-color: #E95420;
  color: white;
}
.button:nth-of-type(2) {
  background-color: white; 
  color: black; 
  border: 2px solid #38b44a;
}
.button:nth-of-type(2):hover {
  background-color: #38b44a;
  color: white;
}
.button:nth-of-type(2).active {
  background-color: #38b44a;
  color: white;
}
.button:nth-of-type(3) {
  background-color: white; 
  color: black; 
  border: 2px solid #772953;
}
.button:nth-of-type(3):hover {
  background-color: #772953;
  color: white;
}
.button:nth-of-type(3).active {
  background-color: #772953;
  color: white;
}

/* Example changes made to element on click: */
#test * {    
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.change-1 {
  font-size: 1.5em;
}
.change-2 {
  text-decoration: line-through;
}
.change-3 {
  color: darkgray;
}

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">


<header id="toggles">
   <h1 id="title">Buttons</h1>
   <ul id="buttons">
      <li class="button">Change 1</li>
      <li class="button">Change 2</li> 
      <li class="button">Change 3</li>
   </ul>
</header>

<main id="test">
   <p class="to-change">Lorem ipsum dolor sit amet.</p>
</main>

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