CODEWITHSUNDEEP
jquery
aleherzko
aleherzko

Reputation: 90

Hide specific elements onload or ready or page:change if select tags have specific value

I'm trying to hide some elements when a page is loaded.

Currently I'm using 'page:change' because I'm working in Ruby on Rails with Turbolinks.

If the div contains a select tag with a specific value, I want to hide some elements.
The page can contain multiple of those select tags, so I can't use ID's.

Code here does not work:

$(document).on('page:change', function(){

    if ($('.q_type_select').val() == 'text' || $('.q_type_select').val() == 'area') {
            $(this).closest('.question_fieldset').children('.choice_fieldset').hide();
            $(this).closest('.question_fieldset').children('.add_fields').hide();
        };
};

I guess that $(this) only works if you click?

If I do this:

$(document).on('page:change', function(){

    if ($('.q_type_select').val() == 'text' || $('.q_type_select').val() == 'area') {
            $('.question_fieldset').children('.choice_fieldset').hide();
            $('.question_fieldset').children('.add_fields').hide();
        };
};

I get all of the elements that have that class to hide and not the ones I want.

Any suggestions?

Upvotes: 0

Views: 42

Answers (1)

bipen
bipen

Reputation: 36531

Assuming whatever you have there is correct (since there is no HTML to look to). Try this

$(function(){
   $('.q_type_select').each(function(){
    var $this = $(this);
   if ($this.val() == 'text' || $this.val() == 'area') {
        $this.closest('.question_fieldset').children('.choice_fieldset').hide();
        $this.closest('.question_fieldset').children('.add_fields').hide();

    };
  })
});

Loop through all of the element (.q_type_select) present in the page on document ready function and hide() it

Upvotes: 1

Related Questions