0

我有一个页面，其中包含许多看起来像这样的代码实例：

<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，另一个可能是 content_bg，第三个可能是 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 效率不高。

提前感谢您的帮助。

4

1 回答 1

0

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

$('.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
于 2013-10-28T00:55:56.903 回答