Question

我在JSfiddle上有一个有效的脚本：它允许用户从下拉菜单中选择日期，如果他们选择“自定义”，则会显示一些日历选项。否则它仍然是隐藏的。但是在我的浏览器上，当我尝试运行相同的脚本并选择“自定义”时，日历不会显示。这就像JSfiddle：http://jsfiddle.net/MgcDU/330/

这是在浏览器上运行的代码片段：

$('#time').on('change', function(){
    if($(this).val() == 'custom'){
        $('#interval_selector').show();
        }
    else{
        $('#interval_selector').hide();
         }
 });

    $(function(){
        window.prettyPrint && prettyPrint();

        var startDate = new Date(2012,1,20);
        var endDate = new Date(2012,1,25);
        $('#dp4').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                } else {
                    $('#alert').hide();
                    startDate = new Date(ev.date);
                    $('#startDate').text($('#dp4').data('date'));
                }
                $('#dp4').datepicker('hide');
            });
        $('#dp5').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() < startDate.valueOf()){
                    $('#alert').show().find('strong').text('The end date can not be less then the start date');
                } else {
                    $('#alert').hide();
                    endDate = new Date(ev.date);
                    $('#endDate').text($('#dp5').data('date'));
                }
                $('#dp5').datepicker('hide');
            });
    });

</script>

<div class="page-header">
   <h2 id="changer">Enter the Event you would like to follow:</h2>
 </div>


<style>
 #interval_selector{
  display:none;
  background:none;
   margin:10px;
 }
</style>

<div class="row">
<div class="span11">  
<form id ="eventForm">
     <select name="period" id="time">
        <option value="beginning" selected="selected">Process all Tweets from start</option>
        <option value="RealTime tweeting">Process all Tweets in real-time</option>
        <option value="the last 24 hours">Last 24 hours</option>
        <option value="the previous week">Previous week</option>
        <option value="custom">Custom</option> 
     </select>

    <input type="submit" id="open" onclick="heading()" value="Start Visualization" />

    <input type="button" onclick="closeMap()" value="Stop Request"/>

    <div id="interval_selector">
        <table class="table">
            <thead>
                <tr>
                    <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th>
                    <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"> Change</a></th>
                </tr>
               </thead>
               <tbody>
                <tr>
                    <td id="startDate "> 2012-02-20</td>
                    <td id="endDate "> 2012-02-25</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form> 
</div>  


<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>

我基于Stafan Petre的eyecon.ro/bootstrap-datepicker示例基于datepicker。

我看不出我做错了什么。

由于

Answer 1

默认情况下，jsfiddle在窗口加载时运行。将代码包装在$(document).ready(function(){...})中以获得类似的效果。（我正在查看代码段中的第一个代码块）

$(function(){ // <--- THIS LINE WAS MOVED
    $('#time').on('change', function(){
        if($(this).val() == 'custom'){
            $('#interval_selector').show();
            }
        else{
            $('#interval_selector').hide();
             }
     });
     window.prettyPrint && prettyPrint();

脚本在JSfiddle中运行但不在浏览器上运行

1 个答案: