jquery .show() not working on ASP MVC 3 fieldsets

问题:

Below is the jquery I'm using to cycle through a group of fieldset elements and, based upon the user's selection from a group of radio buttons, decide which one should be visible and which should be hidden (they are all hidden when the page loads). However, I can't get the .show() method to work.

jQuery

$(document).ready(function () {
    $('input[name=TransactionType]').change(function () {
        var radioValue = $(this);
        var elements = [];

        $('#RightDiv').children().each(function () {
            console.log(radioValue.attr('id') + " " + $(this).attr('id'));
            if (radioValue.attr('id') == $(this).attr('id')) {
                console.log('here');
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

ASP MVC

<div id="LeftDiv" style="width:450px;float:left;">
    <fieldset style="width:350px;">
        @Html.RadioButton("TransactionType", false, new { @id = "Enroll" }) Enroll a Tax ID for EFT <br />
        @Html.RadioButton("TransactionType", false, new { @id = "New" }) New Tax ID Without EFT Enrollment <br />
        @Html.RadioButton("TransactionType", false, new { @id = "ModT" }) Modify EFT Information by Tax ID <br />
        @Html.RadioButton("TransactionType", false, new { @id = "ModA" }) Modify EFT Information by Agent ID <br />
        @Html.RadioButton("TransactionType", false, new { @id = "Clone" }) Clone EFT on to a Sub Agent ID <br />
        @Html.RadioButton("TransactionType", false, new { @id = "Unenroll" }) Unenroll EFT by Tax ID 
    </fieldset>        
</div
<div id="RightDiv" style="width:420px;float:left;">
    <fieldset id="Enroll" style="width:350px; visibility: hidden;">...</fieldset> 
    <fieldset id="New" style="width:350px; visibility: hidden;">...</fieldset>   
    <fieldset id="ModT" style="width:350px; visibility: hidden;">...</fieldset>
    <fieldset id="Clone" style="width:350px; visibility: hidden;">...</fieldset> 
    <fieldset id="Unenroll" style="width:350px; visibility: hidden;">...</fieldset>                 
</div>

Here's a screen shot of the console readout from the jquery loop

回答1:

Change the visibility: hidden; of your fieldsets to display: none;.

This will fix your issue.

回答2:

jQuery.show() only knows how to deal with the display property of CSS per the API documentation so for that code to work you either need to use display:none; instead of visibility:hidden; or use jQuery.attr() to edit the style attribute.