Question

我加载了一个隐藏div的页面。单击其中一个＆＃34; li＆＃34; s后，隐藏div的内容将被加载到名为＆＃34; resultblock＆＃34;的另一个div中。我在＆＃34; resultblock＆＃34;里面有一个单选按钮。 div命名为＆＃34; CUSTOM＆＃34;。单击此单选按钮后，我希望其旁边的2个文本框从＆＃34; readonly更改为editable＆amp;那么＆＃34; yyyy / mm / dd＆＃34;的日期格式显示在文本框内。我试图通过调用函数eb_tb＆amp;来实现这一点。向上点击＆＃34; CUSTOM＆＃34;以外的任何其他单选按钮，我希望文本框能够清除＆amp; go readlyly我试图用dib_tb函数。不幸的是，这些似乎都不起作用。

不将隐藏的div加载到＆＃34; resultblock＆＃34; div，功能有效。将项目加载到resultblock中会导致问题。

＆＃34; thisFile.php＆＃34;是指当前代码所在的文件名。我指的是同一个文件来加载隐藏在＆＃34; resultblock＆＃34;中的div。格。

这是我的代码。有人可以帮我发现我的错误吗？

  <html>
       <head>
          <meta charset='utf-8'>
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!--link rel="stylesheet" href="css/revised.css"-->
          <link rel="stylesheet" type="text/css" href="css/dashboard.css">
          <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
          <script type="text/javascript">
             function setDivProps() {
                $('#resultblock').height(594).css({
                   cursor: "auto",
                   backgroundColor: "#A69A74",
                  // backgroundColor: "#FFFFFF",
                   marginLeft: "5%",
                   marginTop: "5%",
                   width: "88%",
                   height: "75%",
                   borderRadius: "25px",
                   border: "2px solid black",
                  // background: "url(image/divpic.jpg)" 
                });
             };

            function radio_check_enable_custom_date_range_text_box() {
                if (document.getElementById('hd_radio_1').checked) {
                    document.getElementById('custom_date_range_id_1').removeAttribute('readonly');
                    document.getElementById('custom_date_range_id_2').removeAttribute('readonly');
                    document.getElementById('custom_date_range_id_1').value = 'yyyy-mm-dd';
                    document.getElementById('custom_date_range_id_2').value = 'yyyy-mm-dd';
                }
            }
            ;


            function radio_check_disable_custom_date_range_text_box() {
                document.getElementById('hd_radio_1').checked == false;
                if (document.getElementById('hd_radio_1').checked === false) {
                    document.getElementById('custom_date_range_id_1').value = '';
                    document.getElementById('custom_date_range_id_2').value = '';
                    document.getElementById('custom_date_range_id_1').setAttribute('readonly', true);
                    document.getElementById('custom_date_range_id_2').setAttribute('readonly', true);
                }
            }
            ;

             $(document).ready(function(){
                $('#cssmenu li').click(function(){
                   $("#cssmenu li").removeClass("active");
                   $(this).addClass("active");
                 });

                $("#page1").click(function(){
                   setDivProps();
                   // $(this).css("background-color","black");
                   $('#resultblock').load('thisFile.php #form_1');
                });

                $("#page2").click(function(){
                   setDivProps();
                   $('#resultblock').load('thisFile.php #form_2');
                });

                $("#page3").click(function(){
                   setDivProps();
                   $('#resultblock').load('thisFile.php #form_3');
                });
             });
       </script>
          <title>DEMO</title>
       </head>
       <body>
          <div>
             <header class="site-header-wrap">
                <div class="site-header">
                   <h1>MY DEMO</h1>
                </div>
             </header>
             <div id='cssmenu'>
                <ul class="uinav">
                   <li class='active'><a id="home1" href='#' ><span>OPTION-1</span></a></li>
                   <li><a id="page1" href="#"><span>OPTION-2</span></a></li>
                   <li><a id="page2" href="#"><span>TOPTION-3</span></a></li>
                   <li><a id="page3" href="#"><span>OPTION-4</span></a></li>  
                </ul>
             </div>
             <div id="div_id_1" style="display: none;">
                <form method="post" action="" id='form_1'>
                  <table id="tbl_format_1">
                      <tr bgcolor="#8F4A11">
                          <td colspan="3" id="table_f_1">
                              <b> TIMELINE </b>
                          </td>
                      </tr>
                      <tr>
                          <td colspan=3>

bla bla

Answer 1

以下是我设法解决这个问题的不同方法。

解决方案 - 1

http://forums.asp.net/t/1600445.aspx?To+Hide+multiple+items+having+same+ID+using+Javascript

function hideAll(ctrlId)
{
    var Ctrls = document.all(ctrlId);
    for (var i = 0; i<Ctrls.items.length; i++)
    {
          var Ctrl = Ctrls.items(i);
          Ctrl.style.display = "none";
    }
}

解决方案 - 2

Hiding elements with a specified id

更新：

好吧，如果你需要隐藏一组div，我通常会在其中添加一个像.element-to-hide这样的类：

<div id="asd" class="element-to-hide">...
<div id="lol" class="element-to-hide">...
<div id="foo" class="element-to-hide">...
Ant after just a touch of jQuery:

$('.element-to-hide').each(function(){
  $(this).hide();
});

希望这可以帮助其他人处于和我一样的状况。

javascript隐藏的div显而易见 - 无法找到元素

1 个答案: