根据所选选项的类别更改选择的类别

Question

我有一个包含许多 元素的页面。我想要实现的是确保如果 的选定 有一个名为 italic 的类，那么 然后有 italic 添加类（即jQuery.addClass('italic')）。如果不是，则从 中删除 italic 类，以确保正确显示其他 元素（即jQuery.removeClass('italic')）。

我在大多数尝试中注意到的是，要么所有 都有 italic 类，要么 italic 类没有被相应地删除.

由于我不确定我在选择器和回调逻辑中的选择在这种情况下是否特别合理或良好的做法（因为我一直在沮丧地尝试使其工作）我决定不包含我之前使用的代码尝试。相反，请参考这个小的 HTML 和 CSS 示例：

.斜体{ 字体样式：斜体； } - 选择 - 条形 福 巴兹选择>

另外，我知道并非所有浏览器都支持

和 的 CSS 样式。相关的 J2EE Web 应用程序只能在受控环境下通过 Firefox 访问。

Answer 1

如果用户更改您选择的“foo”中的选项，函数将根据所选选项应用或删除斜体。

$("select").change(function(e) {
    var select = e.target;
    var option = select.options[select.selectedIndex];
    if ($(option).hasClass('italic')) {
        $(select).addClass('italic');
    } else {
        $(select).removeClass('italic');
    }
});

Answer 2

nemisj 的回答完美地处理了这种行为（除了错字“esle”而不是“else”）——你只需要一些更好的 CSS 来完成它：

select.italic {
    font-style:italic;
}

select option {
    font-style:normal;
}    

select option.italic {
  font-style:italic;
}

样式的问题是选项将采用其父选择的样式，除非另有说明。因此，专门用font-style:normal; 覆盖默认选项，然后用font-style:italic; 重新设置option.italic 样式就可以了。

这是一个测试页面，显示它可以使用多个选择：http://www.spookandpuff.com/examples/selectStyles.html

Answer 3

你能做的最好的事情是这样的：

$("select").change(function() {
    if ($("select option:selected").hasClass('italic')) {
        $("select").addClass('italic');
    }
    else {
        $("select").removeClass('italic');
    }
});

$("select").mousedown(function() {
    $("select").removeClass('italic');
});

正如您所说，将类应用于选择会将其应用于整个控件，而不仅仅是文本框。您对此无能为力。我的建议是捕获 mousedown 事件并删除样式。这样，当您查看选项时，您的样式就会出现。这有两个缺点：

• 选择文本框时不会以斜体字体显示
• 如果您使用键盘进行选择，这将不起作用。您需要为此处理更多事件。

如果这对您来说太重要了，我建议您使用自定义的选择控件（例如使用 jQuery 和无序列表或表格实现），您可以通过它来控制整个外观。