2011-08-20 72 views
5

我有一些JavaScript是應該的窗口加載後,但由於某種原因運行,它永遠不會運行。功能是不是叫

這裏是我的代碼:

function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

window.onload = setClasses; 

的setClasses()函數似乎並沒有運行。但是,當我通過FireBug的控制檯手動調用它時,它確實有效。

代碼放置在我的網頁的標題。

任何幫助表示讚賞。

完整的HTML片段:

<head> 
...... 

<script type="text/javascript"> 
function setClasses(){ 
     document.getElementsByClassName("gchoice_35_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_22_0")[0].onclick = sedanShow; 
     document.getElementsByClassName("gchoice_34_0")[0].onclick = sedanShow; 

     document.getElementsByClassName("gchoice_34_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_35_1")[0].onclick = suvShow; 
     document.getElementsByClassName("gchoice_22_1")[0].onclick = suvShow; 

     document.getElementsByClassName("gchoice_22_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_35_2")[0].onclick = vanShow; 
     document.getElementsByClassName("gchoice_34_2")[0].onclick = vanShow; 
    } 

    function sedanShow(){ 
      document.getElementById("sedan").style.display="inline" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="none" 
     } 
     function suvShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="inline" 
      document.getElementById("van").style.display="none" 
     } 
     function vanShow(){ 
      document.getElementById("sedan").style.display="none" 
      document.getElementById("suv").style.display="none" 
      document.getElementById("van").style.display="inline" 
     } 
    window.onload = setClasses; 
    </script> 

......

+3

哪裏您網頁上顯示這個代碼?你介意發佈一個不起作用的完整HTML代碼片段嗎? –

+3

我相信setClasses正在運行,這不是問題。我敢打賭,如果你在你的setClasses函數中發出警報,它會觸發。我相信這可能是你如何設置你的onclick屬性。 IE要求它被設置爲一個字符串,而Firefox則要求它是一個函數。 JQuery和YUI通過提供事件實用程序來幫助緩解這種情況。我會建議查看這些框架,因爲它們有助於減少很多您必須處理的跨瀏覽器怪癖。 – Zoidberg

+0

是什麼其他設置window.onload重寫此代碼? – epascarello

回答

2

你總是可以使用JQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      setClasses(); 
     }); 
</script> 

編輯

例JQuery的事件重構:

$(".gchoice_35_0").click(function(){ 
    //Handler Code... 
}); 
+0

尼斯,很好,JQuery也是一個非常好的解決方案,你可以通過在setClasses方法中顯示Jquery事件處理來詳細說明你的答案嗎?我認爲這會給你的答案增加一些價值。 – Zoidberg

+0

一個很好的API參考:http://api.jquery.com/click/ –

1

我要給使用YUI,隨意使用與否的答案,但我認爲框架是一個好主意,以幫助加快JavaScript的發展。因此,添加以下到您的網頁

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 

然後,而不是在window.onload = someFn的(因爲這可以在IE,驚喜驚喜古怪的),請執行下列操作

YAHOO.util.Event.onDOMReady(function() { 
    setClasses(); 
}); 

然後在你的設置類的功能,請執行以下操作:

function setClasses(){ 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_0")[0], 'click', sedanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_0")[0], 'click', sedanShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_1")[0], 'click', suvShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_1")[0], 'click', suvShow); 

     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_22_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_35_2")[0], 'click', vanShow); 
     YAHOO.util.Event.on(document.getElementsByClassName("gchoice_34_2")[0], 'click', vanShow); 
    } 

這應該是個訣竅。