aleherzko aleherzko - 4 months ago 9
jQuery Question

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?

Answer

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 with .q_type_select present in the page on document ready function and hide()