开发者

Hide and show div using Jquery

开发者 https://www.devze.com 2023-03-11 11:59 出处:网络
I am trying to hide a div which is easily done with hide function in jquery. But it is not working.The div is

I am trying to hide a div which is easily done with hide function in jquery. But it is not working.The div is

<div id="antivirusAlertDiv">
            <ul class="shielding_elements">
                <li>
                    <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.AlertMe ? true : false)%>
                    <label for="id_4">
                        Alert Me</label>
                </li>
                <li>
                    <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.DonotAlert ? true : false)%>
                    <label for="id_5">
                        Don’t Alert</label>
                </li>
       开发者_运维问答     </ul>
        </div> 

jquery code is:

function ShowAndHide(id, state) {
        var $mydiv = $('#antivirusAlertDiv');
        if (state == false) {
            $mydiv.hide().html('');
            //  $('#uniform-antivirusAlertType').hide();
          //  $('#antivirusAlertDiv .shielding_elements li').hide();
            // $("input[name='antivirusAlertType']").attr("disabled","disabled");
            //                $("#" + id).addClass("hide");
            //                $("#" + id).removeClass("show");
        }
        else {
                  $mydiv.show();
            //$('#uniform-antivirusAlertType').show();
           // $('#antivirusAlertDiv .shielding_elements li').show();
            //$("input[name='antivirusAlertType']").removeAttr("disabled");
            //                $("#" + id).removeClass("hide");
            //                $("#" + id).addClass("show");
        }
    }


Use .toggle(). However, you need to actually bind it to some event. For example, if the HTML looked like this:

<button id="clickme">Click to toggle</button>

<div id="antivirusAlertDiv">
    <!-- snip -->
</div>

Then in a document ready handler,

$('#clickme').click(function ()
{
    $('#antivirusAlertDiv').toggle();
});

Demo: http://jsfiddle.net/mattball/rPYLK/


N.B. you can simplify the existing code as follows:

<div id="antivirusAlertDiv">
    <ul class="shielding_elements">
        <li>
            <label>
                <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.AlertMe)%>
                Alert Me
            </label>
        </li>
        <li>
            <label>
                <%= Html.RadioButton("antivirusAlertType", 0, antivirusAlertType == AntivirusAlertType.DonotAlert)%>
                Don’t Alert
            </label>
        </li>
    </ul>
</div>
  • The conditional operator is redundant
  • Wrap the <label> around the corresponding input and the for attribute can be omitted
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号