如何用jQuery/JavaScript移除元素中特定前缀的未知类并添加新类

我看了你写的2048游戏代码，核心问题是在点击#left按钮时，没法正确移除所有以tile-position开头的类，然后替换成指定类。先给你梳理下原代码里的几个小问题，再给出修正后的方案：

原代码的核心问题 #

1. 类选择与匹配错误：用find('*')会选中所有子元素（包括.tile-inner），这不是你要操作的目标；正则/tile-position\-*/写得不对，没法准确匹配tile-position-x-y格式的类。
2. 移除类的方式低效且易出错：循环遍历所有可能的tile-position类来移除，不仅冗余，还容易漏写或写错。
3. HTML与选择器错误：最后添加新tile时，选择器$("tile-container")少了点（应该是$(".tile-container")），而且HTML标签没闭合。

修正后的完整代码方案 #

1. 优化JavaScript代码

// 定义所有位置类
const 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"
];

// 封装创建tile的函数，复用代码
function createRandomTile() {
  const randomPos = position[Math.floor(Math.random() * position.length)];
  return `<div class="tile tile-2 ${randomPos} tile-new"><div class="tile-inner">2</div></div>`;
}

// 开始游戏按钮逻辑
$("#start").on("click", function(){
  // 清空容器后创建两个初始tile（避免重复点击叠加）
  $('.tile-container').empty().append(createRandomTile() + createRandomTile());
});

// 左移按钮逻辑
$("#left").on("click", function(){
  // 精准选中所有tile元素（排除子元素）
  const $tiles = $(".tile-container .tile");

  // 移除所有以tile-position开头的类（jQuery 1.4+支持回调写法）
  $tiles.removeClass(function(index, className) {
    // 匹配所有tile-position开头的类，返回给removeClass移除
    return (className.match(/\btile-position-\d+-\d+/g) || []).join(' ');
  });

  // 给所有tile添加指定目标类（这里是tile-position-1-4，可按需修改）
  $tiles.addClass('tile-position-1-4');

  // 添加新的随机位置tile
  $(".tile-container").append(createRandomTile());
});

2. 补全并修正HTML代码

注意要引入jQuery，否则$选择器会失效，同时补全网格结构：

<html>
<head>
<title>2048</title>
<link href="mil.css" rel="stylesheet" type="text/css">
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="container">
  <div class="game-container">
    <!-- 4x4游戏网格 -->
    <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>
    <!-- 存放tile的容器 -->
    <div class="tile-container"></div>
  </div>
</div>
<!-- 操作按钮 -->
<div class="btn-container">
  <button id="start">Start Game</button>
  <button id="left">Move Left</button>
</div>
<!-- 引入你的JS文件 -->
<script src="your-script.js"></script>
</body>
</html>

3. CSS代码保持不变

你写的CSS样式没问题，直接复用即可。

关键优化点说明 #

• 精准选择元素：用.tile-container .tile直接选中所有tile，避免误操作子元素。
• 高效移除类：利用jQuery的removeClass回调函数，通过正则匹配并移除所有tile-position-x-y格式的类，无需遍历所有可能的类。
• 代码复用：封装createRandomTile函数，避免重复写创建tile的HTML代码。
• 避免重复叠加：点击start按钮时先清空容器，防止多次点击生成过多tile。

内容的提问来源于stack exchange，提问作者mohdrafi uddin