removeClass oddity


#1

Hi gang,

I’m using jQuery to add and remove classes to some buttons so that I can set the background-color of some rectangles. “Wait, why don’t you just animate them?” Because with a class I can set it once and tweak it later without having to tweak 40 keyframes. I’m meeting with enough success to get excited (I’m easily amused, what can I say) but not enough to put it to bed.

Here I have three buttons to talk about some of the issues, I have 3 groups of two elements in them, the symbol and the rectangle. The rectangle should change color when selected, so Im using :nth-child to grab the second child of the group.

	$(element).click(function(){
			$(this).children(':nth-child(1)').addClass("selected");	
	});

The Add works fine - but I can’t figure out how to remove .selected from the other two elements. You can see in the file itself I’ve been working through permutations of .next…

The Toggle works fine, though it requires a double-click(!). This appears to be a common issue.

The Remove (which has removeClass) doesn’t work at all, which is just strange.

@DBear, I tried your hypeDocument.getElementProperty solution, but it doesn’t appear I can change the background-color element, according to the docs which you kindly linked to.

All advice and insight welcome-

removeClass.hype.zip (50.4 KB)


#2

Hi ouch_stop

Firstly @Daniel confused as it said you had mentioned my name :smiley: then I realised you edited the post :slight_smile:

@ouch_stop not sure as to what post you saw the solution but you are right. You cannot change the background property using Hype’s API (yet ;)) I know this is something Jonathan is working on.

You can use good old javascript and the style property to get to where you want but for the moment I’ll try and stick with jQuery :slight_smile:

The logic of what you are doing is sound however as Hype wraps all elements in a container (div) it is actually counting those divs when working out the “nth-child” of anything. So, even though it works for the first 2 (i.e it’s adding the selected class to the container div but as it’s actually changing the background of those container divs it seems to work) it is actually changing the div that contains the “decoration” element. It gives the same effect but not what you were intending on doing :slight_smile:

For a visual of this, open your console inspector for your browser and you’ll see what I mean.

Tha being said, why isn’t it doing anything for the “remove” set. Well, it is but as you cannot give the containing element a class name within Hype so, there is nothing to remove therefore it does nothing :smiley:

How do I solve this? :open_mouth: I hear you scream!!!

Well, using jquery use the following (and by the way, this gets rid of the double click :))

$(element).children(':nth-child(2)').find('.HYPE_element').addClass('selected') //add
$(element).children(':nth-child(2)').find('.HYPE_element').toggleClass('selected') //toggle
$(element).children(':nth-child(2)').find('.HYPE_element').removeClass('selected') //remove

this is all you need so you don’t need the click method just use the above code in each of your functions (the code corresponding to your function that is so one line is all you need in each function i.e add class, remove, etc)

so effectively you’re changing the nth-child to 2 (as you have 2 elements in the group) and then finding the element with the class “HYPE_element” all elements that you create in Hype have this class and then adding/removing/toggling the class for that element.

DEMO ALERT

Demo


#3

Thank You @DBear for taking the time to write your thorough explanation… as usual.


#4

Schwing! As Jim said, your Hype Forum Merit Badge Sash is clearly brimming. Thank you so much. Yes, this helps clear up the RemoveClass issue.

Begging your indulgence on this a bit further, how then would I reach out to disable the sibling buttons when I press, say, the Add or Toggle buttons? I very sillily put this in to my toggleSelected, which is one of about 20 permutations I’ve tried :stuck_out_tongue:

			$(element).siblings().find('.HYPE_element').removeClass('selected') ;

Academic point: wouldn’t .find() obviate the need to specify nth-child(), as it recursively descends the hierarchy?

(updated .hype in case it’s useful)

removeClass.hype.zip (46.6 KB)


#5

Hi @ouch_stop

Using “siblings” won’t work for similar reasons stated above. When Hype “runs” i.e previewed in a browser or exported, it wraps every element that you create in the IDE in a container element and also gives them classes (as you’ve seen me use “.HYPE_element” previously) with that in mind any siblings, even though in the IDE you’ve grouped them together won’t be the elements you think they will as they all have container elements around them (think boxes wrapped in clingfilm (cellophane)).

You are right in thinking that .find() traverses multiple levels of the DOM to look for something and it would possibly get rid of the need t use nth-child but in your case, it would return more than one element (as you have 2 elements inside the element that is calling the function).

In order to get the other elements to remove their associated “selected” class, if they have one you would need to search for all elements with the “selected” class first and then remove that class and add the same class to the element calling the function. see screenshot

Also, and I can’t emphasize this enough :slight_smile: , you don’t have to have a click event in your code. The event is already being fired as you have attached this function to the “on Mouse Click” action. This is why you get a double click effect :smiley:

EDIT: Oh and by the way, you can get rid of all the .chidren() .find() methods by placing the “on mouse click” action that calls the hype function on the rectangle elements that are meant to have the class added/removed. Then your function would look like


#6

Ok this should get me enough to get me into trouble. It’s funny, i never caught the trapping of the click within hype’s already catching it. I adore Unconcious Bias :wink:

Thank you again DBear!


#7

no problems. I always like to remove code that doesn’t need to be there. It’s just a habit :slight_smile:


#8

Good habit. I’ll start adopting. I think one can accurately describe me as Self-Mistaught so your guidance is helping to steer me down the road of good practices.

I found these two lines are identical, btw:

// var elements = $(document).find(’.selected’);
// var elements = $(".selected");

I’m now trying to work out how to select only the .selected children of siblings, so if I had

Group 1
A, B (selected), C

and

Group 2
A B (selected), C

…clicking on any element in Group 1 won’t disable Group 2’s…