Search jQuery

jQuery Forum

philip.ma..

combination of addClass, hasClass and removeClass

in Getting Started • 10 years ago

Hi all,
my Problem:
I've got some divs with class ".tile"
Every time you click on them, they should rotate 90 degrees (CSS3-Based)
to perform this rotation I defined the classes .rot0 (no rotation), .rot1 (90 degrees), .rot2 (180 degrees) and .rot3 (270 deg)...
The first rotation works perfectly fine, but the second not...
I already tried to use an array with the classes in it and to combine it with .hasClass... -.-
I use the following code:

$(".rot0").click(function(){
    $(this).addClass('rot1').removeClass('rot0');
});

$(".rot1").click(function(){
    $(this).addClass('rot2').removeClass('rot1');
});

$(".rot2").click(function(){
    $(this).addClass('rot3').removeClass('rot2');
});

$(".rot3").click(function(){
    $(this).addClass('rot0').removeClass('rot3');
});

I tried to figure out what's the fault for the last half hour, but I have no idea what it could be...
I'm an "advanced beginner" in JS and jQuery, so please explain your answers ;)

Thanks already now for your answers and your patience with me ;P

P.S.: Sorry for my particular badly English...

Replies(18)

jakecigar

Re: combination of addClass, hasClass and removeClass

10 years ago

When the code is run, your second through fourth selectors don’t select anything.

You can use 1 selector to catch all the rotatable elements, then test how far they are rotated and set the next rotation.

Something like :

$(".canRotate").click(function(){
if ( $(this).hasClass('rot0') ) $(this).addClass('rot1').removeClass('rot0');
else if ( $(this).hasClass('rot1') ) $(this).addClass('rot2').removeClass('rot1');
else if ( $(this).hasClass('rot2') ) $(this).addClass('rot3').removeClass('rot2');
else if ( $(this).hasClass('rot3') ) $(this).addClass('rot0').removeClass('rot3');
else $(this).addClass('rot1')
})

JΛ̊KE

philip.ma..

Re: combination of addClass, hasClass and removeClass

10 years ago

Ok, cool that worked perfectly fine :D
But I've got one more question:
I want to check each time, a .tile-Div is clicked, if all divs have a certain class...
Just like:

$(".tile").focus(function(){
if('true' == $('#one').hasClass('rot1').toString()){
    if('true' == $('#two').hasClass('rot0').toString()){
    if('true' == $('#three').hasClass('rot0').toString()||'true' == $('#three').hasClass('rot2').toString()){
    if('true' == $('#four').hasClass('rot1').toString()||'true' == $('#four').hasClass('rot3').toString()){
    if('true' == $('#six').hasClass('rot0').toString()||'true' == $('#six').hasClass('rot2').toString()){
    if('true' == $('#seven').hasClass('rot3').toString()){
    if('true' == $('#eight').hasClass('rot1').toString()){
    if('true' == $('#nine').hasClass('rot2').toString()){
        $("#message").show('slow');
    }
    }
    }
    }
    }
    }
    }
    }
});

the divs #one to #nine are my .tile-class-divs...

jakecigar

Re: combination of addClass, hasClass and removeClass

10 years ago

Is it some kind of combination lock? Cute idea!

Your .tile is my .canRotate, right?

Only <input> like tags get a focus event, I think you want to use click. I would call the new function @ the bottom of the click handler.

'true' == $('#one').hasClass('rot1').toString()

is a rather strange and longwinded way of saying

$('#one').hasClass('rot1')

JΛ̊KE

philip.ma..

Re: combination of addClass, hasClass and removeClass

10 years ago

It's more like an web-based thinking game ;)

My code is now:

$(".tile").click(function(){
if($('#one').hasClass('rot1')){
    if($('#two').hasClass('rot0')){
    if($('#three').hasClass('rot0')||$('#three').hasClass('rot2')){
    if($('#four').hasClass('rot1')||$('#four').hasClass('rot3')){
    if($('#six').hasClass('rot0')||$('#six').hasClass('rot2')){
    if($('#seven').hasClass('rot3')){
    if($('#eight').hasClass('rot1')){
    if($('#nine').hasClass('rot2')){
        $("#win").show('slow');
    }
    }
    }
    }
    }
    }
    }
    }
});

if all parts are rotated right, nothing happens...
Level 1 is Paris 1 Level Menu

jakecigar

Re: combination of addClass, hasClass and removeClass

10 years ago

I suggest you put the code inside the click code. Not as it’s own click code.

Here’s a nice jQueryism to quickly get the entire page’s rotations

$('.tile').map(function(){return this.className.replace(/[a-zA-Z\s]+/g,'')}).get().join('')

It returns a string like "10112312", which could shorten the code considerably. You could even call parseInt using base 4 on the string to come up with a single integer that would represent the winning combinations. It would also make the game a bit more hack-proof.

parseInt($('.tile').map(function(){return this.className.replace(/[a-zA-Z\s]+/g, '')}).get().join(''),4)

JΛ̊KE

It’s a handsome game. I look forward to playing it.

philip.ma..

Re: combination of addClass, hasClass and removeClass

10 years ago

O.o
That's a little bit more advanced JS, I googled some of the things, but I don't REALLY understand what it does exactly, how I get my "winning-code" and how I implement it ;)
Sry for my neverending questions
And already now a big huge thanks for your help!

jakecigar

Re: combination of addClass, hasClass and removeClass

10 years ago

The winning strings would all match the regular expression /10[02][13][02]312/. Using winning numbers would require a different numbers for each of the possible winning combinations. Winning numbers might be used if there was only a single winning combination.

$(".tile").click(function(){
if ( $(this).hasClass('rot0') ) $(this).addClass('rot1').removeClass('rot0');
else if ( $(this).hasClass('rot1') ) $(this).addClass('rot2').removeClass('rot1');
else if ( $(this).hasClass('rot2') ) $(this).addClass('rot3').removeClass('rot2');
else if ( $(this).hasClass('rot3') ) $(this).addClass('rot0').removeClass('rot3');
else $(this).addClass('rot1')
var game=$('.tile').map(function(){return this.className.replace(/[a-zA-Z\s]+/g, '')}).get().join('')
alert(game)
if (game.match(/10[02][13][02]312/)) // a regular expression to match the winning game.
$("#message").show('slow');
})

Sure, but I don't want to force the other browsers to work with background-images, if they do it well in css3...
At the moment I'm working on my first canvas game :D

jakecigar

Re: Re: combination of addClass, hasClass and removeClass

10 years ago

I didn’t look into that part of the code. I LOVE to write pages with few or no images. Don’t add background images! You may have to tighten up the elements or use z-index or use non-transparent backgrounds.

But whatever you do, you’ve written a game you can be proud of.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

combination of addClass, hasClass and removeClass

Replies(18)

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: Re: combination of addClass, hasClass and removeClass

Re: combination of addClass, hasClass and removeClass

Re: Re: combination of addClass, hasClass and removeClass

Statistics

Tags

Actions

Related Posts