javascript - 未选择日期选择器时隐藏两个特定的 div

Question

我有下面的 html 代码，我需要隐藏 div - canvas-holder-CT ，当未选择日期选择器范围时调用。

代码

<span style="float: left;margin-left:2em"> <b>Date Range: </b>
        <input type="text" id="datepicker" > <b>to </b>
        <input type="text" id="datepicker2"> </span><div id = "Alert" style="float:left;margin-left:2em"> Please select a valid Date Range!</div>
        </br>

    <div id="contain">
    <div id="canvas-holder" style="width:46%;float:left;position: absolute; left: 0px;  top: 100px;">
        <canvas id="chart-area" width="350" height="450"  style="display: block; margin-left:2em">      
    </canvas>
    <center> <b><details>
  <summary>Distribution by Hooks</summary>
</details></center> </b></div>

    <div id="canvas-holder-keymsg" style="width:46%;float:right;position: absolute; right: 0px; top: 100px;">
        <canvas id="chart-area-km" width="350" height="450" style="display: block; margin-left:2em">
    </canvas><center> <b><details>
  <summary>Distribution by Keymessages</summary>
</details></center> </b></div>

<div id="canvas-holder-CT" style="width:46%;float:right;position: absolute; left: 0px; top: 700px;">
        <canvas id="chart-area-CT" width="350" height="450" style="display: block; margin-left:2em">
        </canvas><center> <b><details>
  <summary>Distribution by Call Types</summary>
</details> </b></center></div>

<div id="callratediv" style="float:right; width: 46%;position: absolute; right: 0px; top: 1000px;">
<table id="CallTable" class="dataTable" align="center" style="float:right; width: 80%; height: 100px; ">
    <caption> <b>Call Rate </b></caption>
        <th id="CallNameLabel" style="text-align:center">Number of days in field</th>
        <th id="CallIdLabel" style="text-align:center">Number of calls submitted</th>   
        <th id="CallRateLabel" style="text-align:center">Call Rate </th>        
    </tr>
</table>
</div>
    </div>

请找到我的 JS 脚本。

 $(function() {
            $("#datepicker").datepicker({
                onSelect: function() {
                    startDate = $(this).datepicker('getDate');
                    start = formatDate(startDate);
                    if( start!=null && end!=null && end>=start)
                    {document.getElementById('Alert').style.visibility = 'hidden';
                    //document.getElementById('canvas-holder').style.visibility = 'visible'; 
                    //document.getElementById('canvas-holder-keymsg').style.visibility = 'visible'; 
                    //document.getElementById('canvas-holder-CT').style.visibility = 'visible'; 
                    document.getElementById('contain').style.visibility = 'visible';

                    initial(start, end);

                    }
                    else {
                   document.getElementById('Alert').style.visibility = 'visible'; //Will show
                //  document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                //  document.getElementById('canvas-holder-CT').style.visibility = 'hidden'; 
                //  document.getElementById('canvas-holder-keymsg').style.visibility = 'hidden'; 
                document.getElementById('contain').style.visibility = 'hidden'; 
            //  $("callratediv").hide();
            //  $("canvas-holder-CT").hide();       
                    }
                }

            });
            $("#datepicker2").datepicker({
                onSelect: function() {
                    endDate = $(this).datepicker('getDate');
                    end = formatDate(endDate);
                    alert('skn here s' + startDate);
                    alert('skn here e' + endDate);
                    if( start!=null && end!=null && end>=start)
                    {document.getElementById('Alert').style.visibility = 'hidden';
                    //document.getElementById('canvas-holder').style.visibility = 'visible'; 
                //  document.getElementById('canvas-holder-keymsg').style.visibility = 'visible'; 
                //  document.getElementById('canvas-holder-CT').style.visibility = 'visible';
                    document.getElementById('contain').style.visibility = 'visible'; 
                    initial(start, end);
                    }
                    else {
                        document.getElementById('Alert').style.visibility = 'visible'; //Will show
                    //  document.getElementById('canvas-holder').style.visibility = 'hidden'; 
                    //  document.getElementById('canvas-holder-CT').style.visibility = 'hidden'; 
                    //  document.getElementById('canvas-holder-keymsg').style.visibility = 'hidden'; 
                    document.getElementById('contain').style.visibility = 'hidden'; 
                //  $("callratediv").hide();
                //  $("canvas-holder-CT").hide();                   
                              }
                    }

                });

            });

不幸的是，该代码适用于 div - canvas-holder-keymsg 、 canvas-holder 但不适用于上述内容。

有人可以帮我吗？

Answer 1

使用$("#canvas-holder-CT")。 jQuery 的选择器应该是 #canvas-holder-CT，而不仅仅是 ID。