javascript - jQuery:如果用户点击的元素类与被点击元素的类匹配，则删除该类元素

Question

我是一名新的网络开发人员(学生)，正在尝试使用 jQuery/JavaScript 制作井字游戏的变体(基本上是更大版本的井字游戏!)使用 jQuery/JavaScript，但遇到了问题最后一点功能。

基本上，它是一个由 3x3 网格组成的 3x3 网格。当玩家在其中一个小网格上选择一个方 block 时，该小方 block 在单个网格上的位置对应于下一个玩家必须玩的大网格。

基本上，下一位玩家可以放置标记的位置受到限制，我希望将“非事件”类添加到玩家无法选择的所有方 block 中。我想删除玩家可以选择的方 block 上的那个类。每一轮，不同的方 block 都会移除非事件类(取决于玩家可以玩的地方)。

我尝试的解决方案/逻辑是这样的:每个正方形都有三个类，两个数字和“正方形”(后者出于样式原因)。第一个数字对应于它在其单独的 9x9 网格(1 到 9)上的位置，第二个数字对应于它的网格在更大的 9x9 网格方向上的位置(也是 1 到 9)。因此，位于大 9x9 网格左上角位置的网格左上角位置的小方 block 将具有类别“1”(它在其 9x9 小网格中的位置)“正方形”和“1”(它的网格在更大的 9x9 方向内的位置)。它旁边的第二个方 block 将具有类“2 方 block 1”。它旁边的网格上的方 block 都将“2”作为它们的最后一个数字类别。

在玩家点击时，我基本上希望 jQuery 在每个方 block 上放置一个“Inactive”类，以返回被点击方 block 的第一个数字类(对应于它在 9x9 小网格中的位置的数字)并删除 '其第二个数字类与点击方 block 返回的第一个数字类匹配的方 block 上的“非事件”类。

所以当玩家在方 block 上放置 X 或 O 时:1)在游戏板上的每个方 block 上添加非事件状态，这样下一个玩家就不能到处玩2) 返回被点击方 block 的第一个数类。3) 从游戏板上与步骤 2 返回值匹配的所有方 block 中删除非事件类。4) 下一位玩家放置他们的标记并重复。

我不知道这对任何人是否有意义，但这是相关的代码(定义了玩家放置标记时发生的情况):

        ticTacToe.placeMarker = function($square){
        //don't do anything if the square is already taken
        if ($square.hasClass('inactive')){
            return;
        }
      // puts an X or an O on the board
      // and marks the square as unavailable

        $square.html(ticTacToe.currentPlayer).addClass('inactive');

      // makes all squares unavailable
        ticTacToe.$squares.addClass('inactive');

      // returns the relevant (first) part (the number corresponding to its position in its individual grid) of the class of the clicked-on square (I know this part works because I console-logged it) 
        var myClass = $square.html(ticTacToe.currentPlayer).attr("class");
        var classSpecific = myClass.slice(0,1);
        return (classSpecific);

      // this is supposed to check if any element with the class 'square' (so any square) has the class corresponding to the returned value in the last step, and remove the Inactive class from it if it does. It looks messy when I eyeball it. It's probably wrong. 
        ('.square').hasClass(classSpecific).removeClass('inactive');

我想知道是否有人可以帮助我(也许我的语法搞砸了？也许我必须将它分成更多的步骤？也许我必须(希望不要)使用正则表达式)如果我设法做到，我将非常感激让这个工作。只要功能存在，它就不必使用我的逻辑/方法。提前致谢。我只发布了我认为相关的部分代码，但如果需要，我也可以发布其他部分。

已解决

通过删除我返回 classSpecific 变量的行，我的函数可以正常工作。

Answer 1

最后一行写错了，应该是

$('.square').hasClass(classSpecific).removeClass('inactive');

代替

('.square').hasClass(classSpecific).removeClass('inactive');

在网络上查看 jQuery 教程可能会有用，正如我们从 jQuery selector documentation 中看到的那样，您会从 jQuery 构造函数中获得一组 DOM 元素。

来自jQuery API docs jQuery() — 也可以写成 $() — 在 DOM 中搜索与提供的选择器匹配的任何元素，并创建一个引用这些元素的新 jQuery 对象:

然后您可以对这些元素执行操作，例如更改 CSS 类，我认为这是您需要的一个示例在 CSS class selector documentation 上.它向任何具有 .myClass 类的 DOM 元素添加红色边框

$( ".myClass" ).css( "border", "3px solid red" );