jQuery或JavaScript，用于从元素中删除特定类，而不知道需要删除的确切类名称

Question

使用JavaScript，我创建了一个div元素，并从包含一组类的数组中分配了某些类，并使用随机方法将一个类随机分配给HTML元素。现在，基于一些事件，比如按钮单击事件，我想从HTML元素拥有的类集中删除一个特定的类，并添加一个特定的类。

问题是，我不知道需要删除的确切类名，但我对它知之甚少，因为类是以类似的东西开头的。所以现在我需要一些jQuery或JavaScript代码，它们可以选择特定的超文本标记语言元素，并在一些事件上从超文本标记语言元素中删除特定的类，比如单击事件上的按钮。

为了解决这个问题，我在javascript中写了一些onclick按钮处理函数的代码。

​

var position=["tile-position-1-1", "tile-position-2-1", "tile-position-3-1", "tile-position-4-1",
                "tile-position-1-2", "tile-position-2-2", "tile-position-3-2", "tile-position-4-2",
                "tile-position-1-3", "tile-position-2-3", "tile-position-3-3", "tile-position-4-3",
                "tile-position-1-4", "tile-position-2-4", "tile-position-3-4", "tile-position-4-4"];
 $("#start").on("click", function(){
   var ele='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>'+
            '<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>';
     $('.tile-container').append(ele);
 });
$("#left").on("click", function(){
  var arr=[];
  arr=$(".tile-container").find('*').filter(function(){
    return $(this).attr("class").match(/tile-position\-*/);
  });
  for(i=0;i<4;i++)
      for(j=0;j<4;j++){
        arr.removeClass(`tile-position-${i+1}-${j+1}`)
    }
    arr.addClass('tile-position-1-4');
   $('.tile-container')
   var ele1='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new"><div class="tile-inner">2</div>';
      $(".tile-container").append(ele1);
});

html, body {
  margin: 0;
  padding: 0; }
.btn-container{
  margin-top: 30px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
button{
  color: #0099CC;
  background: #0099CC;
  border: 2px solid black;
  border-radius: 6px;
  color: black;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
.container{
  width: 500px ;
  margin: 0 auto;
}
.game-container {
  margin-top: 40px;
  position: relative;
  padding: 15px;
  background: #345;
  border-radius: 2px;
  width: 500px;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.grid-container {
  position: absolute;
  z-index: 1; }
.grid-row {
  margin-bottom: 15px;
}
.grid-row:after {
    content: "";
    display: block;
    clear: both;
}
.grid-cell {
  width: 106.25px;
  height: 106.25px;
  margin-right: 15px;
  float: left;
  background: #0099CC;
}
.tile-container {
  position: absolute;
  z-index: 2; }
.tile, .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 107px; }
.tile.tile-position-1-1 {
  transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
  transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
  transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
  transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
  transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
  transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
  transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
  transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
  transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
  transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
  transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
  transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
  transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
  transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
  transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
  transform: translate(363px, 363px); }
.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }
.tile .tile-inner {
   border-radius: 3px;
   background: #eee4da;
   text-align: center;
   font-weight: bold;
   z-index: 10;
   font-size: 55px; }

<html>
 <head>
   <title>2048</title>
   <link href="mil.css" rel="stylesheet" type="text/css">
   </head>
 <body>
   <div class="container">
      <div class="game-container">
          <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>
      <div class="tile-container">
      </div>
    </div>
   </div>
   <div class="btn-container">
       <button id="left" type="button" >LEFT</button>
       <button id="right" type="button" >RIGHT</button>
       <button id="up" type="button" >UP</button>
       <button id="down" type="button" >DOWN</button>
       <button id="start" type="button" >START</button>
   </div>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="mil.js"></script>
    </body>
  </html>

​

Answer 1

下面的函数搜索类名以给定短语开头的所有元素，并从类列表中删除该类：

​

function removeClass( phrase ) {
  var element = $( '*[class^="' + phrase + '"], *[class*=" ' + phrase + '"]' );

  element.each( function () {
    var classList = $( this ).attr( 'class' ).split( ' ' );

    for ( var i = 0; i < classList.length; i++ ) {
      if ( classList[ i ].search( phrase ) != -1 ) {
        delete classList.splice( i, 1 )
      }
    }

    $( this ).attr( 'class', classList.join( ' ' ) )
  } )
}

.abcd_class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="class1 abcd_class">The phrase exists in the class list.</div>
<div class="abcd_class class1">The phrase exists in the class list.</div>
<div class="class1">The phrase does'nt exist in the class list.</div>
<div class="class1 class2 abcd">The phrase does'nt exist in the class list.</div>
<div class="abcd_class abcdclass">The phrase exists in the class list.</div>

<input name="" type="button" value="Remove Class" onclick="removeClass( 'abcd_' )" />

​