這段代碼試圖獲得離它最近的元素有什麼問題

這個腳本（JavaScript和jQuery）不能正常工作。這段代碼試圖獲得離它最近的元素有什麼問題

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<!DOCTYPE html> 
<script> 
mycars = {}; 

function dodat(){ 
var btn=document.createElement("div"); 
btn.style.width="25px"; 
btn.style.height="25px"; 
btn.style.backgroundColor="red"; 
btn.style.boxShadow="inset 0px 0px 0px 2px black"; 
btn.style.position="absolute"; 
btn.style.left="0px"; 
var numba = Math.round(Math.random()*10000000000); 
btn.id=numba; 
mycars[numba] = -100; 

var move = function(){ 
mycars[numba] = mycars[numba]+1; 
document.getElementById(numba).style.left=mycars[numba]+"px"; 
}; 

setInterval(move, 10); 

document.getElementById("track").appendChild(btn); 
} 
</script> 

<body> 

<div style="background-color:#c3c3c3;width:500px;height:25px;overflow:hidden;position:relative;" id="track"></div> 

<div id="shoot"></div> 
</body> 

<script> 
setInterval("dodat();", "1000"); 
</script> 

<script> 
function dis(){ 
// Let's find the closest block! 
var otherEls = $('div:not(#shoot):not(#track)'), 
    compareTop = compareEl.offset().top, 
    compareLeft = compareEl.offset().left, 
    winningScore = Infinity, 
    score, winner, curEl; 

otherEls.each(function() { 
    // Calculate the score of this element 
    curEl = $(this); 
    score = Math.abs(curEl.offset().top - compareTop) + Math.abs(curEl.offset().left - compareLeft); 
    if (score < winningScore) { 
     winningScore = score; 
     winner = this; 
    } 
}); 

alert('' + winner.id + '. Let me colour it green for you.'); 
} 
setTimeout("dis();", "1000"); 
</script>

腳本的最後一部分試圖利用jQuery來獲得最接近#shoot的元素，但是我必須做一些錯誤的。非常感謝你:)我想知道什麼是錯的！我逃避了這個功能，以防萬一這是問題所在。

來源

2013-12-13 user3092778

你不應該使用的ID從數字 – Shadow

開始這不可能是問題，我@shadow – user3092778

您使用的是'的setTimeout之前使用的數字（）'調用底部等待DOM加載，然後開始運行程序？如果是這樣，有一個更好的方法來做到這一點 - 使用'$（document）.ready（function（）{...}）;'或它的快捷方法'$（function（）{...}）; ' –

多個錯誤。 compareEl是未定義的，並且您的腳本在文檔準備就緒之前正在運行。一旦你解決了這個問題，你就不能使用全局範圍。

固定碼：http://jsfiddle.net/5fJrx/

$(document).ready(function() { 
mycars = {}; 
compareEl = $("#shoot"); 

function dodat() { 
    var btn = document.createElement("div"); 
    btn.style.width = "25px"; 
    btn.style.height = "25px"; 
    btn.style.backgroundColor = "red"; 
    btn.style.boxShadow = "inset 0px 0px 0px 2px black"; 
    btn.style.position = "absolute"; 
    btn.style.left = "0px"; 
    var numba = Math.round(Math.random() * 10000000000); 
    btn.id = numba; 
    mycars[numba] = -100; 

    var move = function() { 
     mycars[numba] = mycars[numba] + 1; 
     document.getElementById(numba).style.left = mycars[numba] + "px"; 
    }; 

    setInterval(move, 10); 

    document.getElementById("track").appendChild(btn); 
} 

setInterval(dodat, 1000); 

function dis() { 
    // Let's find the closest block! 
    var otherEls = $('div:not(#shoot):not(#track)'), 
     compareTop = compareEl.offset().top, 
     compareLeft = compareEl.offset().left, 
     winningScore = Infinity, 
     score, winner, curEl; 

    otherEls.each(function() { 
     // Calculate the score of this element 
     curEl = $(this); 
     score = Math.abs(curEl.offset().top - compareTop) + Math.abs(curEl.offset().left - compareLeft); 
     if (score < winningScore) { 
      winningScore = score; 
      winner = this; 
     } 
    }); 

    alert('' + winner.id + '. Let me colour it green for you.'); 
} 
setTimeout(dis, 1000); 
});

來源

2013-12-13 20:41:18 Gaurav

這段代碼試圖獲得離它最近的元素有什麼問題

回答

相關問題