Question

我已经得到了这个片段

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
  ev.dataTransfer.setData("class", ev.target.classList);
}

function drop(ev, id, classelement) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var classs = ev.dataTransfer.getData("class");
  document.getElementById(id).classList.add(classs);
  var classel = String(classelement);
  var claskurang = classs.slice(0, classs.length - 1);
  if (classel.includes(claskurang)) {
    var hapus = claskurang + "1" + claskurang + "2" + claskurang + "3";
    alert(hapus);
    document.getElementById(id).classList.remove(hapus);
  }

}

body {
  margin: 0;
  padding: 0;
  height: 700px;
}

.hamburger {
  float: right;
  font-size: 40px;
  cursor: pointer;
  transition: .5s;
}

.hamburger:hover {
  background-color: #00AAFD;
  color: white;
}

#content {
  height: fit-content;
  background-color: #00AAFD;
  float: right;
  width: fit-content;
  text-align: center;
}

#content h3 {
  margin-left: 10px;
  margin-right: 10px;
}

#content div {
  width: 25px;
  height: 25px;
  margin: 10px;
  cursor: pointer;
}

.image1 {
  background-color: #3b5998;
}

.image2 {
  background-color: mediumpurple;
}

.image3 {
  background-color: #1dc116;
}

.border1 {
  border: 1px solid black;
}

.border2 {
  border: 1px dashed black;
}

.border3 {
  border: 1px dotted black;
}

.fcolor1 {
  color: lightgreen;
}

.fcolor2 {
  color: #1d9c23;
}

.fcolor3 {
  color: #5e5e5e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="div1" ondrop="drop(event,this.id,this.classList)" ondragover="allowDrop(event)">
  <p id="asd"></p>
  <div class="fitur">
    <div id="content">
      <h3><b>Background Color</b></h3>
      <div class="image1" id="body" draggable="true" ondragstart="drag(event)"></div>
      <div class="image2" id="body" draggable="true" ondragstart="drag(event)"></div>
      <div class="image3" id="body" draggable="true" ondragstart="drag(event)"></div>
      <h3><b>Table Border</b></h3>
      <div class="border1" id="table" draggable="true" ondragstart="drag(event)"></div>
      <div class="border2" id="table" draggable="true" ondragstart="drag(event)"></div>
      <div class="border3" id="table" draggable="true" ondragstart="drag(event)"></div>
      <h3><b>Font Color</b></h3>
      <div class="fcolor1" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <div class="fcolor2" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <div class="fcolor3" id="font" draggable="true" ondragstart="drag(event)">Lorem</div>
      <span class="hamburger">=</span>
    </div>
    <input type="text" id="id" name="id" placeholder="ID" readonly>
    <input type="text" id="nama" name="nama" placeholder="Nama">
    <input type="text" id="kelas" name="kelas" placeholder="kelas" />
    <input type="button" id="cmd" value="Insert" onclick="displayResult(this.value)">
    <input type="button" id="clear" value="Clear data" onclick="cleardata()">
    <table id="myTable" border="1" ondrop="drop(event,this.id,this.class)" ondragover="allowDrop(event)">
      <tr>
        <td>ID</td>
        <td>Nama</td>
        <td>Kelas </td>
        <td>Button</td>
      </tr>
    </table>
    <div id="isi">
    </div>
</body>

这是我的主要代码，我有

的问题

function drop(ev,id,classelement) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        var classs = ev.dataTransfer.getData("class");
        document.getElementById(id).classList.add(classs);
        var classel = String(classelement);
        var claskurang = classs.slice(0,classs.length -1);
         if(classel.includes(claskurang)) {
         var hapus = claskurang+"1"+claskurang+"2"+claskurang+"3";
            document.getElementById(id).classList.remove(hapus);
        }

    }

我试图在像claskurang+"1 "之类的claskurang之后给出空间，但它仍然是错误的并且控制台说这个 console error
这是我警告变量“hapus”时的输出 output when var hapus alerted

实际上我想要拖放，我想删除与元素中的类相同的类，例如，如果我将边框类添加到body元素，我想只删除边框类并替换它进入我添加的类（使用拖放）

如何使用变量删除多个类

0 个答案: