隐藏特定元素onload或ready或page：如果select标签具有特定值，则更改(Hide specific elements onload or ready or page:change if

隐藏特定元素onload或ready或page：如果select标签具有特定值，则更改(Hide specific elements onload or ready or page:change if select tags have specific value)

我正在尝试在加载页面时隐藏一些元素。

目前我正在使用'page:change'因为我正在使用Turbolinks在Ruby on Rails上工作。

如果div包含具有特定值的select标记，我想隐藏一些元素。 该页面可以包含多个选择标签，因此我无法使用ID。

这里的代码不起作用：

$(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(); }; };

我想$(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'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?

最满意答案

假设你有什么是正确的（因为没有HTML可供查看）。 尝试这个

$(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(); }; }) });

循环遍历文档就绪函数页面中存在的所有元素（ .q_type_select ）并隐藏（）它

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