问如何在用户选择时在父div上应用Jquery的CSS？
EN

Stack Overflow用户

提问于 2012-02-01 19:38:22

回答 1查看 212关注 0票数 0

如何使用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

因此，如果用户选择答案，并且答案的值为"True"，则JQuery应该将一个“正确的”CSS类添加到ID = rdAnsBool1的父div中

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

在您的回答中，请记住以下标记是在列表视图中呈现的

这是JSFiddle链接

http://jsfiddle.net/VTevz/

javascript

jquery

asp.net

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-02-01 19:46:35

就像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');
    });
});