如何在用户选择上将CSS与Jquery应用于父div？

Question

我如何使用Jquery在用户选择上添加类？

我的Aspx标记如下。

     <div id="Answer" class="Ans">
           <div id ="Left"> 
           <asp:RadioButton ID="rdAnsBool1" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans1") %>' />
           <asp:RadioButton ID="rdAnsBool2" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans2") %>' />
           <asp:RadioButton ID="rdAnsBool3" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans3") %>' />
           <asp:RadioButton ID="rdAnsBool4" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans4") %>' />
           <asp:RadioButton ID="rdAnsBool5" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans5") %>' />
           <asp:RadioButton ID="rdAnsBool6" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans6") %>' />
           <asp:HiddenField ID="HiddenField1" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans1Bool") %>'/>
           <asp:HiddenField ID="HiddenField2" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans2Bool") %>'/>
           <asp:HiddenField ID="HiddenField3" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans3Bool") %>'/>
           <asp:HiddenField ID="HiddenField4" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans4Bool") %>'/>
           <asp:HiddenField ID="HiddenField5" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans5Bool") %>'/>
           <asp:HiddenField ID="HiddenField6" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans6Bool") %>'/>
           </div>
        </div>

访客可以通过选择“获奖问题”单选按钮来选择答案

HiddenFields包含true或false

因此，如果用户选择rdAnsBool1且HiddenField1的值为“ True”，则JQuery应向ID为=的父div添加一个“正确”的CSS类。

如果用户选择rdAnsBool1并且HiddenField1的值为“ False”，则JQuery应向ID为=的父div添加一个“错误”的CSS类。

在回答问题时，请记住，以下标记在列表视图中呈现

这是JSFiddle链接

http://jsfiddle.net/VTevz/

Answer 1

与FYI一样，隐藏的字段值在HTML检查器中可见，因此不是存储秘密答案的最佳位置。

假设您的ID和姓名将保持不变（虽然不是一个好主意，但是）...

这有效： http : //jsfiddle.net/VTevz/6/

$(function() {
    $('input[name$="answers"]').change(function() {
        // clear all the previous classes
        $('input[name$="answers"]').parent().removeClass('correct').removeClass('wrong');

        // get the index of the selected answer
        var i = $('input[name$="answers"]').index(this);

        // get the value of the corresponding correct answer
        var answer = $('input[type="hidden"]:eq(' + i + ')').val();

        // check if it's true and add the appropriate class
        if (answer == 'True') $(this).parent().addClass('correct');
        else $(this).parent().addClass('wrong');
    });
});