How to add class to specific instance of plugin element

Plugin builders
1

I’m writing a plugin that creates a dropdown menu, and it can be used multiple times on the page.

Now I want to add a class to each instance of the dropdown menu, but only if specific conditions are true.

Here is a trimmed down version of what I’m trying to achieve:

//This selects an input element from the page
instance.data.input = document.querySelector("#" + properties.input_id_box);

//Build the dropdown menu instance
instance.data.iti = (lots of code here - removed to make this post simpler)

//If input has the disabled attribute set, look inside this menu instance for the HTML element ".iti__flag-container" and add the class "bjg_disabled"
if ( $(instance.data.input).prop( "disabled" ) == true ) {
	$(instance.data.iti).find(".iti__flag-container").addClass("bjg_disabled");
}

The if statement returns true, but the class bjg_disabled is not added to the dropdown menu.

Note: I am using instance.data.iti inside the if statement because I only want the class added to dropdown menus with a corresponding instance.data.input property of disabled.

2

Have you stepped through the code and examined the variables? Seems like that would be a logical next step. Try placing a debugger; statement just inside the if block and then examining the data.

3

Thank you!

I actually never knew Chrome dev tools had a debugger that worked like that. It helped me find a solution :slight_smile:

1 Like