单选按钮asp.net高亮div

Question

在我的代码下方是当单击相应的单选按钮时突出显示标题和页脚div，但我无法使其正常工作。 我用过jQuery。

<div class="radio-group-row">
    <asp:Label runat="server" ID="Label_EveningWeekend" AssociatedControlID="RadioButton_EveningWeekend">
        <asp:Panel runat="server" ID="Panel_Package1" CssClass="package-container">
            <div class="package-title">Free Evening & Weekend</div>
            <div class="package-body">
                <h4>£16.75</h4>
                <p>Lorum ipsum</p>
            </div>
            <div class="package-footer">
                <asp:RadioButton runat="server" ID="RadioButton_EveningWeekend" GroupName="Package" OnCheckedChanged="Radio_List_Packages_OnSelectedIndexChanged" ClientIDMode="Static" />
            </div>
        </asp:Panel>
    </asp:Label>
    <asp:Label runat="server" ID="Label1" AssociatedControlID="RadioButton_Anytime">
        <asp:Panel runat="server" ID="Panel_Package2" CssClass="package-container">
            <div class="package-title">Free Evening & Weekend</div>
            <div class="package-body">
                <h4>£16.75</h4>
                <p>Lorum ipsum</p>
            </div>
            <div class="package-footer">
                <asp:RadioButton runat="server" ID="RadioButton_Anytime" GroupName="Package" OnCheckedChanged="Radio_List_Packages_OnSelectedIndexChanged" ClientIDMode="Static" />
            </div>
        </asp:Panel>
    </asp:Label>
    <asp:Label runat="server" ID="Label2" AssociatedControlID="RadioButton_Data">
        <asp:Panel runat="server" ID="Panel_Package3" CssClass="package-container">
            <div class="package-title">Free Evening & Weekend</div>
            <div class="package-body">
                <h4>£16.75</h4>
                <p>Lorum ipsum</p>
            </div>
            <div class="package-footer">
                <asp:RadioButton runat="server" ID="RadioButton_Data" GroupName="Package" OnCheckedChanged="Radio_List_Packages_OnSelectedIndexChanged" ClientIDMode="Static" />
            </div>
        </asp:Panel>
    </asp:Label>
</div>

和jQuery：

$("package-container").click(function () {
    $(this).parent('radio-group-row').find('label').removeClass('highlight');
    $(this).find('input:radio').attr('checked', true);
    $(this).find('label').addClass('highlight');
});

编辑：

我的CSS：

.package-container {
    display: inline-block;
    background-color:#fff;
    margin-left: 1%;
    float: left;
    width: 32%;
}

.package-title {
    text-align: center;
    color: #fff;
    height: 50px;
    background-color:#333;
}
.package-body {
    text-align: center;
    color: #666;
    height: 175px;
    padding-top: 10%;
    background-color:#fff0f5;
}
.package-footer {
    text-align: center;
    height: 25px;
    background-color:#333;
}
.highlight {
    background-color:red;
}

我的问题是，当单击与其关联的单选按钮时，如何获取标题和页脚div来更改颜色。

编辑

$(".package-container").click(function () {
        $(this).closest('.radio-group-row').find('package-title').removeClass('package-title');  
        $(this).find('input:radio').prop('checked', true);  
        $(this).find('package-title').addClass('highlight'); 
    });

Answer 1

只需使用.selector类选择器即可：

$(".package-container").click(function () {
   $(this).parent('.radio-group-row').find('label').removeClass('highlight');
   $(this).find('input:radio').prop('checked', true);
   $(this).find('label').addClass('highlight');
});

并使用.prop()而不是.attr()

Answer 2

您没有正确引用元素类。 例如：

$("package-container")

应该：

$(".package-container")

类必须以开头. 在选择器中。 没有它，jQuery将寻找一个名为package-container的元素 ：

<package-container />

因为不存在，所以没有找到匹配项，也没有创建处理程序。

您在这里也有相同的错误：

parent('radio-group-row')

（以及可能未包含在问题中的其他代码中）

Answer 3

查看您的html结构，您可以使用以下方法解决问题：

//add dot to selector
$(".package-container").click(function () {
    $(this).closest('.radio-group-row').find('label').removeClass('highlight');  //add dot to selector and use closest
    $(this).find('input:radio').prop('checked', true);  //use prop instead of attr
    $(this).parent('label').addClass('highlight');  //use parent instead of find
});

变更摘要

• 将点添加到类选择器
• 将父级更改为最接近，因为radio-group-row不是package-container的直接父package-container
• 将attr更改为prop
• 将.find('label')更改为parent因为标签是package-container的父package-container ，而不是子级