Question

我有以下html代码，我需要隐藏divs - canvas-holder-CT，当没有选择日期选择器范围时，callratediv。

代码

<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 。

Answer 2

您的代码中有很多错误。很难以一种简单的方式标记它们，但请查看以下内容：

jQuery中的ID选择器在ID之前需要#。改变这些行：

$("callratediv").hide();
$("canvas-holder-CT").hide();

为：

$("#callratediv").hide();
$("#canvas-holder-CT").hide();

您的代码中有以上两行，因此请修复这两个位置。

jQuery中没有formatDate()函数。改变这些行：

start = formatDate(startDate);
end = formatDate(endDate);

为：

start = $.datepicker.formatDate(startDate);
end = $.datepicker.formatDate(endDate);

此外，在代码的前半部分中没有声明变量end以及缺少initial()函数的错误，但是您可能在其他代码中的那些地方出现了错误＆＃ 39; t post。

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

2 个答案: