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
将attr更改为prop
将.find('label')更改为parent，因为标签是package-container的父级，而非子级

单选按钮asp.net高亮div

3 个答案: