單選按鈕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 ，而不是子級