上一个加班的位移

Question

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

我已经从 codepen.io

创建了 DEMO

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

如果您在开发者控制台中查看 demo 页面。单击红色div时。此颜色类自动添加.changeBgcolor div，如

<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类。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;