Question

适用于jsFiddle的代码：http://jsfiddle.net/NTadX/
我的jquery代码：

<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/CSS/mystyle.css" />

<style>
    $(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</style>

我已经检查过，上面的代码只在文档完全加载时启动...我真的不知道为什么它不起作用。我在谷歌应用引擎上运行这个。感谢

Answer 1

将代码放在脚本标记中：

<script type="text/javascript">
$(function(){
$("input[value='WN']").hover(
    function() { 
        $('#divid').empty();
        $("#divid").append("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DN']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
        $("#divid").toggle();
    }
);
$("input[value='DD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
        $("#divid").toggle();
    }
);
$("input[value='WD']").hover(
    function() { 
        $('#divid').empty();
         $("#divid").append("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
        $("#divid").toggle();
    }
);
 });
</script>

Answer 2

看起来toogle()会给您带来问题。这是一个有效的fiddle

切换案例会更好

Switch case in jquery

更精致的版本here

$(document).ready(function(){
    $("input.selectionItems").live('hover', function() {

        optSelected = $(this).val();
        toUpdate = $("#divid");

    switch (optSelected) {
                    case ('WN'):
                        toUpdate.html("<div>WN: Weekly Number. The number of consecutive weeks you want to book the room</div>"); 
                        break;
                    case ('DN'):
                        toUpdate.html("<div>DN: Day Number. The number of consecutive days you want to book the room</div>"); 
                        break;
                    case ('DD'):
                       toUpdate.html("<div>DD: Day date. The date till which you want to book the room for consecutive days </div>"); 
                        break;
                    case ('WD'):
                       toUpdate.html("<div>WD: Weekly date. The date till which you want to book the room for consecutve weeks</div>"); 
                        break;
                    default:
                        alert('No Selection');
                }
            }
      );


    $('input.selectionItems').live('mouseleave', function(){
        $("#divid").empty();
    });
});

为什么我的jquery在jsFiddle上工作但在localHost上没有？

2 个答案: