javascript - 单选按钮 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

查看您的 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 的直接父级
• 更改attr至 prop
• 更改.find('label')至 parent因为标签是 package-container 的父级, 不是 child