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的值是「選擇答案如果用戶選擇了rdAnsBool1並且HiddenField1的值是「False」，那麼JQuery應該添加一個「錯誤的」CSS類，並將其添加到父div中，並且ID = Answer

如果用戶選擇rdAnsBool1並且HiddenField1的值爲「False」 CSS類到父類DIV與ID =回答

在您的回答，請記住下面的標記是一個列表視圖中呈現

這裏是的jsfiddle鏈接

http://jsfiddle.net/VTevz/

Answer 1

正如一個供參考，隱藏的字段值在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'); 
    }); 
});