Jqueryセレクタの問題

基本的に私は#toggle_boxをJqueryを使用してスライドダウンさせようとしていますが、セレクタとしてdocument.bodyを使用している場合は下のコードが動作しますが、#toggleがセレクタ！なぜどんなアイデア？Jqueryセレクタの問題

<html> 
<head> 

<title>JQuery Testage</title> 
<style> 
#toggle_box { 
display: none; 
} 
#toggle { 
background-color: #FFF000; 
border: solid; 
} 
</style> 
</head> 
<body> 

<script src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$("#toggle").click(function() { 
if ($("#toggle_box").is(":hidden")) { 
$("#toggle_box").slideDown("slow"); 
} else { 
$("#toggle_box").hide(); 
} 
}); 
</script> 

<div id="toggle">Toggle</div> 

<div id="toggle_box">This should silde using the Jquery library 1.4.2</div> 

</body> 

</html>

出典

2011-01-23 Sean

ので、あなたのコードを変更します。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#toggle").click(function() { 
    if ($("#toggle_box").is(":hidden")) { 
     $("#toggle_box").slideDown("slow"); 
    } else { 
     $("#toggle_box").hide(); 
    } 
    }); 
}); 
</script>

問題はJavascriptがロードされ、toggle_box要素がロードされる前に実行されていることです。文書bodyのため、はがjavascriptの前にロードされています。

出典

2011-01-23 19:27:49 Lazarus

なぜそれが動作していなかった理由を説明してくれてありがとう、本当に作る愚かな間違い！：P – Sean

@Seanおそらく、私たちの99％がある時点で同じミスをしていることがわかります。重要なのは間違いを作るのではなく、それを学ぶことです。 – Lazarus

クリックハンドラに$(document).ready(...ラップを付けて、それが動作するはずです：DOMはまだ準備ができていないので、

$(document).ready(function() { 

    // your click handler and anything else that 
    // should run when the DOM is ready 

});

出典

2011-01-23 19:25:00 karim79

ありがとう、完璧に働いています！ :) – Sean

はそれがだろうか？次のコードでスクリプトをラップ試してみてください。

$(function() { 
    // your code here 
});

$(document).ready(function(){ ...});のためのショートコードだとちょうど欠けているものであってもよいこと？

出典

2011-01-23 19:26:09

答えて

関連する問題