Question

请不要向我扔石头 - 我不是专业人士，我试图通过阅读文档解决它，但此刻 - 卡住了。我有手风琴小部件，其中每个手风琴小组（标签）都是问题文本和手风琴内容 - 用户通过单选按钮的响应。有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类并用不同的东西替换它 - 它无法正常工作。如果我只是创建一个新类，说“test”，将背景应用到它并通过JS下面运行它 - 它没有按预期工作（它只会改变文本的背景，而不是整个面板，因为我理解因为手风琴面板有一个名为ui.accordion-header）

的特定区域

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

显然，这是JS to 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");
     }
 })
})

所以我在这里））））

Answer 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 ...
希望它有所帮助。

Answer 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");
     }
 })
})

添加/删除类到手风琴小部件

2 个答案: