向手风琴小部件添加/删除类答案

【问题标题】：Adding/removing class to accordion widget向手风琴小部件添加/删除类
【发布时间】：2014-02-23 18:33:50
【问题描述】：

请不要向我扔石头 - 我不是专业人士，我试图通过阅读文档来解决它，但目前 - 卡住了。我有手风琴小部件，其中每个手风琴面板（选项卡）都是问题文本和手风琴内容 - 用户通过单选按钮的响应。有 4 个选项可以回答这个问题：是、否、NS 和 NA。对于“N”响应 - 手风琴面板应将背景颜色更改为“A”，否则应将其更改为“B”。如果没有给出响应 = 应该保持默认。现在，看起来很简单，我正在尝试使用 jQuery 中的 AddClass 选项，但仍然无法使其工作））））问题是手风琴背景由这条 css 行控制（来自 jQuery 的下载 css）：

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: *#e6e6e6*;
    font-weight: normal;
    color: #555555;
}

我不明白的是如何在这个css中实现background参数的改变？如果我删除 ui.widget 类并用不同的东西代替它 - 它不能正常工作。如果我只是创建一个新类，比如“测试”，对其应用背景并通过下面的 JS 运行它 - 它不能按预期工作（它只会改变文本的背景，而不是整个面板，据我了解，因为手风琴面板有一个名为ui.accordion-header)的特定区域

请看我的 jsfiddle （第 4 章！）http://jsfiddle.net/PatrickObrian/b3A7a/27/

显然，这是 JS 到 AddClass/RemoveClass

jQuery(function () {
 $('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').removeClass('ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default').addClass(".ui-accordion-header");
     } else if (this.value == 'N') {
         $('.QTable').removeClass('.ui-accordion-header').addClass("ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default");
     }
 })
})

所以我在这里))))

【问题讨论】：

标签： javascript jquery css jquery-ui addclass

【解决方案1】：

如果改变你的背景颜色是你最终的目标，我会建议：

jQuery(function () {
 $('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').css("background-color", "green");
     } else if (this.value == 'N') {
         $('.QTable').css("background-color", "red");
     }
 });
});

使用它您不必担心css class，因为上面的代码创建了一个内联css，其优先级高于外部css...
希望它有所帮助。

【讨论】：

Opps - 解决了，但我使用了“ui.accordion-header”而不是“QTable” - 这在设计方面效果更好！）））））谢谢！！！！！！！！！！！！！
如果可以的话我会帮忙
虽然它现在可以完美运行，但这个特定的 JS 会导致两个困难：第一类“ui.accordion-header”适用于长排问题中的所有手风琴面板（abt 400）；其次，由于有 400 多个问题，单选按钮组名称“Radio401”随着每个新问题而变化。
建议跳转聊天

【解决方案2】：

removeClass 和 addClass 是不加分的。多个类由空格分隔。见这里：https://api.jquery.com/removeClass/

你可以试试这个：

jQuery(function () {
$('input[type=radio][name=Radio401]').change(function () {
     if (this.value == 'Y') {
         $('.QTable').removeClass('ui-state-default ui-widget-content ui-widget-header').addClass("ui-accordion-header");
     } else if (this.value == 'N') {
         $('.QTable').removeClass('ui-accordion-header').addClass("ui-state-default ui-widget-content ui-widget-header");
     }
 })
})

【讨论】：