Question: how to show/hide elements in editable lists depending on options

Developing Nodes
1

Hi,

I currently designing a new custom node. For user options I like to use the editable lists widget. All works fine. Now I like to present specific options depending on selections:
image
all fine when I open the config panel (hinding the unused options with display:none
And I can hide the inputs depending on the selected options:

                options.each(function (i) {
                    var option = $(this);
                    var component = option.find(".node-input-option-component");
                    var type = option.find(".node-input-option-type");
                    var min = option.find(".node-input-option-min");
                    var max = option.find(".node-input-option-max");
                    debugger;
                    if (component.val()=="slider") {
                        type.show();
                        if (type.val()=="kelvin temperature") {
                            min.show();
                            max.show();
                        } else {
                            min.hide();
                            max.hide();
                        }
                    } else {
                        type.hide();
                        min.hide();
                        max.hide();
                    }
                });

But I'm stuck how to do this with the labels:
image

I defined them like this:

                    $('<br>')
                        .css('class','node-label-option-max')
                        .css('display',(data.type=="kelvin temperature") ? 'inline-block' : 'none')
                        .appendTo(row);
                    $('<div><span>max</span></div>')
                        .css('class','node-label-option-max')
                        .css('display',(data.type=="kelvin temperature") ? 'inline-block' : 'none')
                        .css('width','35px').css('padding-left','19%').appendTo(row);

But can't "find" them:

                    var labelMax = option.find("node-label-option-max"); // tested # and .
                    labelMax.hide();

I'm a newbee in modern HTML5/jquery stuff ... Any help appreciated. It would be ideal if I can somehow tie the lable together with the input.

Chris

2

Hi @Christian-Me

The .css(..) function is for setting specific css styles, whereas the class is an attribute.

To set the class name of an element you'd do:

.addClass('node-label-option-max')
1 Like
3

Great, that does the trick.
Thank you!

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.