3

适用于 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>

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

4

2 回答 2

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>
于 2012-11-03T06:55:15.417 回答
0

看起来toogle()给你造成了问题。这是一个工作小提琴

开关盒会更好

在 jquery 中切换大小写

更精致的版本在这里

$(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();
    });
});​
于 2012-11-03T07:23:39.817 回答