CODEWITHSUNDEEP
javascriptjqueryregexdomfrontend
test kun
test kun

Reputation: 13

jQuery: Remove class of elements on user click if it's a match with the class of the clicked element

I'm a new web dev (student) trying to make a variation of a Tic Tac Toe game (basically a bigger version of Tic-Tac-Toe with more grids!) using jQuery/JavaScript and am having trouble with the last bit of functionality.

Basically, it's a 3x3 grid of 3x3 grids. When a player selects a square on one of the individual small grids, the location of that little square on the individual grid corresponds to the big grid that the next player has to play on.

Essentially, the next player is limited in where they can place their marker, and I want a class of 'inactive' to be added to all of the squares that the player can't select. I want to remove that class on the squares that the player can select. Each turn, different squares have the inactive class removed (depending on where the player can play).

My attempted solution/logic was this: Each square has three classes, two numbers and 'square' (the latter for styling reasons). One number corresponds to the position where it is on it's individual 9x9 grid (1 to 9), the second number corresponds to what position its grid is on the bigger 9x9 grid orientation (also 1 to 9). So the little square on the top-left position of the grid located in the top left position of the big 9x9 grid would have the classes '1,' (its position within its small 9x9 grid) 'square,' and '1' (its grid's position within the bigger 9x9 orientation). The second square beside it would have classes '2 square 1.' The squares on the grid beside it would all have '2' as their last number class.

On a player click, I basically want jQuery to put an 'Inactive' class on every square, to return the first number class of the clicked square (the number corresponding to its position within the small 9x9 grid) and remove the 'Inactive' class on the squares that have their second number class matching with the clicked square's returned first number class.

So when a player places an X or O on a square: 1) Add inactive to every square on the gameboard so the next player can't play everywhere 2) Return the first number class of the clicked square. 3) Remove the inactive class from all of the squares on the gameboard that match the returned value from step 2. 4) Next player places their marker and it repeats.

I have no clue if that made any sense to anyone, but here's the relevant bit of code (where what happens when the player places their marker is defined):

        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');

I wonder if anyone can help me (maybe my syntax is messed up? maybe I have to split it up into more steps? Maybe I have to (hopefully not) use regex) I'll be extremely thankful if I manage to get this working. It doesn't have to use my logic/method, so long as the functionality is there. Thanks in advance. I only posted the part of the code I thought was relevant, but I can post other parts as well if necessary.

RESOLVED

By removing the line where I'm returning the classSpecific variable my function works.

Upvotes: 1

Views: 204

Answers (1)

svnm
svnm

Reputation: 24348

The last line is incorrect, it should be

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

instead of

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

It might be useful to look over a jQuery tutorial on the web, as we can see from the jQuery selector documentation, you get an array of DOM elements from the jQuery constructor.

From the jQuery API docs jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:

Then you can perform actions on these elements, for instance changing the CSS class, which I think is what you need an example is on the CSS class selector documentation. It adds a red border to any DOM elements with the .myClass class

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

Upvotes: 2

Related Questions