Get Parent ID Name

Using JavaScript with Hype Function Library
1

Im trying to make the debug box text to change when I click “list_opcion-3” to the parent container “marker_5c”

“list_opcion-3” has a class of “listoptions”

This is what I have tried so far, im using JQuery"

var mynewname

$('.listoptions').unbind().on('click touchstart', function() {
	
mynewname = $(this).parent().attr('id');
$("#debugme").text(mynewname);

});
2

Using the information using here by MarkHunte I was able to get the parent ID:

BUT just only by assigning the function with hype "On Mouse Click" function:
https://cl.ly/381y21130E2k/Screen-Shot-2018-02-21-at-8.29.56-PM.png

While not a big deal, Im wondering if there is way to make it work using the .on('click touchstart', function()

3

As there is no document I don’t completely understand what you’re trying to do.

Here is a jQuery snippet that will retrieve the parents of the element clicked.

It will traverse the DOM tree and return all elements that have an ID attribute. As Hype Containers don’t have one it will not return those.

var getParents = $( element ).parents().map(function() {
	return hypeDocument.getElementById(this.id);
})

So, if you were to console log this out, you will get an array with all the parents. The first in the list would be the direct parent. (i.e the group)

//getParents[0] === marker_5c

mynewname = getParents[0].id;
("#debugme").text(mynewname);

Assuming you have another Text element with the ID “debugme” this elements text would change to the ID of the group element. Which if unassigned would be something like “hype-obj-KEH274K3H493SU”

All of this can be put in a function run from the “On Mouse Down (touchstart)” action in the inspector if you need to have touchstart or you can use it in the way you have been BUT “.unbind” has been discouraged since jQuery 1.7 so I would use “.off” instead.

1 Like
4

I am also not fully sure what you are trying to do but…

I would give each marker a class ‘marker’

Then run your function on sceneload.
The function binds all the click touchstart events.
It also just looks for the closest ‘.marker’ class. Which should be the parent.

	$('.listoptions').bind().on('click touchstart', function() {
 
mynewname = $(this).closest(".marker").attr('id');
 
$("#debugme").text(mynewname);
});

debugParent.hype.zip (17.0 KB)

2 Likes
5

@MarkHunte @DBear

You are right, here is the .hype file
https://cl.ly/0G1035260v0T/download/DEMO.hype.zip

What I am trying to do is trigger certain events depending on the value of a variable, I want to assign the variable a value equal to each button group ID.

This is because I need to use the same function for all buttons. So, the only way I

So

if (mymarker == "marker_1") {

// Do Marker 1 stuff

}

if (mymarker == "marker_2") {

// Do Marker 2 stuff

}

And so on. Since Im going to need about 100 buttons, I just want to use 1 single code for each one, and using the parent ID as a way to differentiate each one.

What I originally want to do is to find a way that all elements with a .listoptions class, when clicked, they assign their parents ID into a variable.

This is the structure I am using:

The reason the click works within an element in the group, is because I only need that element to change color, not the whole group bg.

6

hi @Davirus,

you’re already editing each buttons innerHTML, so why not add a data-attribute

'<div data-dest-scene="destScene">Name One</div>'

then use hypes builtin ‘touchstart’ for the button to call

var destScene = element.querySelector('[data-dest-scene]').getAttribute('data-dest-scene');
hypeDocument.getElementById('takemethere').setAttribute('data-dest-scene', destScene)

for the ‘takemethere’ run

`hypeDocument.showSceneNamed(element.getAttribute('data-dest-scene'), 
 hypeDocument.kSceneTransitionInstant);`
2 Likes