如何在基于泛型类的选择在页面加载时显示/隐藏控件

How do I show/hide controls on page load based on a select with generic class?

本文关键字：加载 显示 隐藏 控件 选择 泛型类      更新时间：2023-09-26

我有一个页面，其中包含许多代码实例，如下所示：

<select name="color_type_name" class="color_type_select" id=$ >
    <option value="">no color</option>
    <option value="solid">solid</option>
    <option value="gradient">gradient</option>
</select>
<input name="color1" class="hide color_$" />
<input name="color2" class="hide color_$ gradient_$" />

这些代码块是动态生成的，并根据传递给生成代码的函数的名称和 ID 分配名称和 ID，因此一个 ID 可能header_bg，另一个 ID 可能content_bg，第三个 ID 可能footer_bg。

这两个输入也获取动态类，将color_和/或gradient_追加到选择的 ID 中。我这样做是因为如果用户为颜色类型选择纯色，我会隐藏第二种颜色。如果用户不选择颜色，我将隐藏两个输入。如果选择了渐变，我会取消隐藏所有内容。这是有效的更改函数。

$('.color_type_select').change(function() {
  if( $(this).val() == 'solid' ) {
    $('.color_' + $(this).attr('id')).removeClass("hide");
    $('.gradient_' + $(this).attr('id')).addClass("hide");
  } else if( $(this).val() == 'gradient' ) {
    $('.color_' + $(this).attr('id')).removeClass("hide");
  } else {
    $('.color_' + $(this).attr('id')).addClass("hide");
  }
});

我的问题是，我不知道如何在页面加载时初始化控件。显然，如果只有一个实例，我只会使用 ID，而不是类。我在许多其他情况下这样做，但在这种情况下，我可以在页面上有 4-6 个颜色选择器，因此使用 ID 效率不高。

提前感谢任何帮助。

您甚至可以手动触发更改，以便执行更改事件处理程序并根据选择元素的值设置输入值

$('.color_type_select').change(function() {
  if( $(this).val() == 'solid' ) {
    $('.color_' + $(this).attr('id')).removeClass("hide");
    $('.gradient_' + $(this).attr('id')).addClass("hide");
  } else if( $(this).val() == 'gradient' ) {
    $('.color_' + $(this).attr('id')).removeClass("hide");
  } else {
    $('.color_' + $(this).attr('id')).addClass("hide");
  }
}).change();//here trigger the change event
相关文章：