如何在用戶選擇上將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');
    });
});