基于用户输入的手风琴面板定制

Question

我在问卷（400 个问题）中使用手风琴小部件，其中每个面板代表问题和内容 - 响应区域。由于存在一长串问题，用户希望直观地了解已回答的问题。这是通过改变手风琴面板的背景颜色来实现的。

（请在此处查看示例 - 在第 4 章 http://jsfiddle.net/PatrickObrian/b3A7a/31/）

每个问题可以有 4 个选项来回答：是、否、NS 和 NA。对于“N”响应 - 手风琴面板应将背景颜色更改为“A”，否则应将其更改为“B”。如果没有给出响应 = 应该保持默认。 现在，看起来很简单，我正在尝试使用内联 css 选项，但仍然无法使其工作））））

jQuery(function () {
  $('.Response').change(function () { 
   if (this.value == 'Y') { 
    $('.ui-accordion-header').css("background-color", "green"); 
   } else if (this.value == 'N') { 
    $('.ui-accordion-header').css("background-color", "red"); 
   } 
   }); 
});

所以我遇到的问题是：

1 - 它还不能工作；和

2 - 类“ui.accordion-header”适用于长排问题中的所有手风琴面板（abt 400）； thus when "Y" is selected it changes background of ALL accordion panels in the questionnaire, whereas it should change only of that specific question, where user provided response.

提前致谢！

Answer 1

这应该可行：

jQuery(function () {
    $('.Response input[type=radio]').change(function () {
        console.log(this.value)
        if (this.value == 'Y') {
            $(this).closest('.ui-accordion-content').prev().css("background", "green"); 
        } else if (this.value == 'N') {
            $(this).closest('.ui-accordion-content').prev().css("background", "red"); 
        } else {
            $(this).closest('.ui-accordion-content').prev().css("background", ""); 
        }
    });
});

工作小提琴：http://jsfiddle.net/sabof/R4sHj/