javascript - 与先前加法等级的位移

Question

您好，我正在尝试使用 jquery 替换之前的附加类。但是我的测试代码无法正常工作。

我创建了这个 DEMO 来自 codepen.io

之前点击的颜色位置需要留下新点击的重命名。

如果您检查 demo 开发者控制台中的页面。当您单击红色 div 时。这个颜色类自动添加 .changeBgcolor div like

<div class="changeBgcolor red"></div>

但是像这样点击模糊颜色div之后

<div class="changeBvcolor red blue"></div>

红色类留在那儿，应该保留新点击的颜色。

<div class="changeBgcolor">Background color changing BOX</div>
<div class="color">
   <div class="kek red" id="1">Red</div>
   <div class="kek blue" id="2">Blue</div>
   <div class="kek green" id="3">Green</div>
   <div class="kek yellow" id="4">Yellow</div>
   <div class="kek orange" id="5">Orange</div>
   <div class="kek black" id="6">Black</div>
</div>

JS

$(document).ready(function() {
    $("body").on("click", ".red", function(event) {
    $(".changeBgcolor").addClass("red");
  });
    $("body").on("click", ".blue", function(event) {
    $(".changeBgcolor").addClass("blue");
  });
   $("body").on("click", ".green", function(event) {
    $(".changeBgcolor").addClass("green");
  });
   $("body").on("click", ".yellow", function(event) {
    $(".changeBgcolor").addClass("yellow");
  });
   $("body").on("click", ".orange", function(event) {
    $(".changeBgcolor").addClass("orange");
  });
   $("body").on("click", ".black", function(event) {
    $(".changeBgcolor").addClass("black");
  });
});

.changeBgcolor {
  padding:30px;
   border-bottom:1px solid #d8dbdf;
}
.kek {
   float:left;
   height:30px;
   margin:0px 30px;
   cursor:pointer;
   text-align:center;
   line-height:30px;
   padding:10px;
}
.color {
   position:relative;
   padding:30px 0px;
}

.red {
   background-color:red;
   color:#ffffff;
}
.blue {
   background-color:blue;
   color:#ffffff;
}
.green {
   background-color:green;
   color:#ffffff;
}
.yellow {
   background-color:yellow;
}
.orange {
   background-color:orange;
}
.black {
   background-color:black;
   color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="changeBgcolor">Background color changing BOX</div>
<div class="color">
   <div class="kek red" id="1">Red</div>
   <div class="kek blue" id="2">Blue</div>
   <div class="kek green" id="3">Green</div>
   <div class="kek yellow" id="4">Yellow</div>
   <div class="kek orange" id="5">Orange</div>
   <div class="kek black" id="6">Black</div>
</div>

Answer 1

您可以将原始类存储在变量中，然后点击添加点击的 div 的类。

var c = $(".changeBgcolor").attr('class')
$('.color > div').click(function() {
  $(".changeBgcolor").attr('class', c + ' ' + $(this).attr('class').split(' ')[1])
})

.changeBgcolor {
  padding: 30px;
  border-bottom: 1px solid #d8dbdf;
}
.kek {
  float: left;
  height: 30px;
  margin: 0px 30px;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  padding: 10px;
}
.color {
  position: relative;
  padding: 30px 0px;
}
.red {
  background-color: red;
  color: #ffffff;
}
.blue {
  background-color: blue;
  color: #ffffff;
}
.green {
  background-color: green;
  color: #ffffff;
}
.yellow {
  background-color: yellow;
}
.orange {
  background-color: orange;
}
.black {
  background-color: black;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="changeBgcolor">Background color changing BOX</div>
<div class="color">
  <div class="kek red" id="1">Red</div>
  <div class="kek blue" id="2">Blue</div>
  <div class="kek green" id="3">Green</div>
  <div class="kek yellow" id="4">Yellow</div>
  <div class="kek orange" id="5">Orange</div>
  <div class="kek black" id="6">Black</div>
</div>