1

このコードの何が問題になっていますか? クリックしても 37DIV が表示されない

<a href="#" id="37" class="he"> CS504 </a>
<script>
$( "#37" ).click(function() {
    $( "37DIV" ).show( "bounce", 1000 );
});
</script>
<div id="37DIV" style="display:none">       
        <a href="thread-52.html">lorem pum sum</a>          
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
        </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
4

5 に答える 5

2

jQuery に ID で検索するよう指示する # を忘れました。

交換

$( "37DIV" ).

と

$("#37DIV" ).

また、コードを準備完了のコールバックに含める必要があります。

また、使用する前に jQuery をインポートする必要があります。import 要素をドキュメントの head に置きます:

<!DOCTYPE html>
<html>
<head>
  <title> no title </title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
<a href="#" id="37" class="he"> CS504 </a>
<div id="37DIV" style="display:none">       
        <a href="thread-52.html">lorem pum sum</a>          
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
</div>
<script>
$(function(){
  $("#37").click(function() {
    $("#37DIV").show( "bounce", 1000 );
  });
});
</script>
</body>
</html>

数字で始まる ID は HTML4 では有効ではないことに注意してください (ただし、問題にはなりません)。jQuery 1.5 は非常に古いことにも注意してください。最新の jQuery UI を使用しているため、より新しいバージョンを使用する必要があります。

于 2012-12-08T15:00:50.117 に答える
1

セレクターの id の前に必要です#。セレクターの詳細については、こちらを参照してください。

変化する

 $("37DIV" ).show( "bounce", 1000 );

に

 $("#37DIV" ).show( "bounce", 1000 );
于 2012-12-08T15:00:50.657 に答える
1

$("#37DIV" ). $( "37DIV" ) の代わりに。where # ID を指定する

$( "#37" ).click(function() {
    $( "#37DIV" ).show( "bounce", 1000 );
});

http://jsfiddle.net/TgZKn/5/

于 2012-12-08T15:04:10.400 に答える
0

これを試して：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>    
<script>
$(document).ready(function() {

    $( "#37" ).click(function() {
    $( "#37DIV" ).show("bounce", 1000);
});

});

</script>



</head>

<body>

<a href="#" id="37" class="he"> CS504 </a>
<div id="37DIV" style="display:none">       
        <a href="thread-52.html">lorem pum sum</a>          
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
        <a href="thread-52.html">lorem pum sum</a>      
        </div>
</body>
</html>
于 2012-12-08T15:13:36.827 に答える
0

トグルについては、以下を確認してください

$( "#37" ).click(function() {
    $( "#37DIV" ).toggle("bounce" );
});

http://jsfiddle.net/TgZKn/5/

于 2012-12-08T15:16:27.460 に答える