索引檢查行爲

-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>

來源

2012-04-13 Dejo Dekic

看看小提琴的左側欄。它說'onLoad'這意味着你的代碼在頁面加載時執行。理解你正在使用的工具總是很好的;） – 2012-04-13 13:33:06

您需要將這些行：

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

您$(document).ready(...)函數中。

在該函數之外，指定的DOM元素還不存在。

它只適用於jsfiddle，因爲默認情況下，該站點會自動將您的代碼包裝在onload處理程序中，從而達到相同的效果。

來源

2012-04-13 13:31:14 Alnitak

+1實際上，由於腳本在元素之上，所以它保證它們不存在。 – Paulpro 2012-04-13 13:33:18

@ PaulP.R.O。事實上 - 我還沒有在這一點上完成它，而不是一個不尋常的瀏覽器。 – Alnitak 2012-04-13 13:35:09

索引檢查行爲

回答

相關問題