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>

確認したところ、上記のコードはドキュメントが完全に読み込まれたときにのみ開始されます...なぜ機能しないのか本当にわかりません。これをGoogle App Engineで実行しています。ありがとう

4

2 に答える 2

1

コードを script タグに入れます。

<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()です。ここで働くフィドル

SwitchCaseの方が良かったでしょう

jqueryでcaseを切り替えます

ここでより洗練されたバージョン

$(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 に答える