Javascript 如何基于select with泛型类在页面加载时显示/隐藏控件？

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

<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，而不是类。我在很多其他情况下都是这样做的，但在这种情况下，我可能在一个页面上有4-6个颜色选择器，所以使用ID是没有效率的

---

提前感谢您的帮助。

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

$('.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

$('.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