2012-04-13 4 views
-1

このFiddleでは、「赤」のインデックスが0(警告したい)ですが、自分のローカルコンピュータでそのチェックが機能していないことを警告します... 誰かがなぜこのことが起こっているのか教えてもらえますか?インデックスチェックの動作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
    <meta name="author" content="Dejan Peic"/> 
    <meta name="description" content=""/> 
    <meta name="keywords" content=""/> 



<style type="text/css"> 
.wrapper{ 
width:100px; 
height:150px; 
border:1px solid #000000; 
margin:0auto; 
position:relative; 
display:block; 
} 
.red{ 
width:100px; 
height:50px; 
display:block; 
background-color:red; 
} 
.blue{ 
width:100px; 
height:50px; 
display:block; 
background-color:blue; 
} 
.green{ 
width:100px; 
height:50px; 
display:block; 
background-color:green; 
} 
.checkIndex{ 
width:150px; 
height:20px; 
background-color:black; 
color:white; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    var red = $('.red'); 
    var active = $('.active'); 
    var redIndex = red.index(); 
    var activeIndex = active.index(); 
    $(document).ready(function(){ 
    $('.wrapper div:last').addClass('active'); 

    $('.checkIndex').click(function(){ 

    if(redIndex > activeIndex){ 
    alert('Red has index 0'); 
    } 

    else{ 
    alert('check doesnt work :('); 
    } 

    }); 

    }); 
    </script> 
    </head> 
    <body> 
    <div class="wrapper"> 
    <div class="red"></div> 
    <div class="blue"></div> 
    <div class="green"></div> 
    </div><!--/wrapper--> 
    <div class="checkIndex">Check index of RED</div> 

    </body> 
    </html> 
+1

フィドルの左側のバーを見てください。 'onLoad'とは、ページが読み込まれたときにコードが実行されることを意味します。 )あなたが使っているツールを理解することは常に良いことです; –

答えて

3

あなたはこれらの行を移動する必要があります:あなたの$(document).ready(...)関数の内部

var red = $('.red'); 
var active = $('.active'); 
var redIndex = red.index(); 
var activeIndex = active.index(); 

この機能の外では、指定されたDOM要素はまだ存在しません。

これは、デフォルトでサイトがコードを自動的にonloadハンドラにラップするので、同じ効果が得られるため、jsfiddleでのみ機能します。

+0

+1スクリプトが要素の上にあるので、実際には存在しないという保証があります。 @ PaulP.R.O。 – Paulpro

+0

確かに - 私はその時点で、珍しいブラウザではなく、スクリプトを修正しているのです。 – Alnitak