2011-08-20 12 views
5

Tôi có một số javascript được cho là chạy sau khi tải cửa sổ nhưng vì lý do nào đó, nó không bao giờ chạy.Chức năng không được gọi là

Dưới đây là mã của tôi:

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; 

Các setClasses() chức năng dường như không chạy. Tuy nhiên nó làm việc khi tôi tự gọi nó thông qua giao diện điều khiển của FireBug.

Mã được đặt trong tiêu đề của trang web của tôi.

Mọi trợ giúp đều được đánh giá cao.

html Full đoạn mã:

<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

đâu mã này xuất hiện trên trang của bạn? Bạn có nhớ đăng một đoạn mã HTML đầy đủ không hoạt động không? –

+3

Tôi tin rằng setClasses đang chạy, đó không phải là vấn đề. Tôi đặt cược nếu bạn đặt một cảnh báo trong chức năng setClasses của bạn, nó sẽ cháy. Tôi tin rằng đó có thể là cách thiết lập thuộc tính onclick của bạn. IE yêu cầu nó được thiết lập như một chuỗi, trong khi firefox yêu cầu nó phải là một hàm. JQuery và YUI giúp giảm thiểu điều này bằng cách cung cấp các tiện ích sự kiện. Tôi sẽ khuyên bạn nên xem xét các khuôn khổ này bởi vì chúng giúp giảm rất nhiều quirks trình duyệt chéo mà bạn phải giải quyết. – Zoidberg

+0

Còn bất cứ điều gì khác có đặt window.onload đang ghi đè mã này không? – epascarello

Trả lời

2

Bạn luôn có thể sử dụng 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> 

Sửa

Ví dụ JQuery Event Refactor:

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

Tốt, JQuery cũng là một giải pháp rất tốt, bạn có thể xây dựng câu trả lời của mình bằng cách hiển thị xử lý sự kiện Jquery trong phương thức setClasses không? Tôi nghĩ rằng sẽ thêm một số giá trị cho câu trả lời của bạn. – Zoidberg

+0

Tham chiếu api tuyệt vời: http://api.jquery.com/click/ –

1

Tôi sẽ đưa ra một câu trả lời có sử dụng YUI, cảm thấy tự do để sử dụng nó hay không, nhưng tôi nghĩ rằng khuôn khổ là một ý tưởng tốt để giúp tăng tốc độ phát triển javascript. Vì vậy, thêm dòng sau vào trang của bạn

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

Sau đó, thay vì window.onload = someFn (vì điều này có thể kỳ quặc trong IE, ngạc nhiên ngạc nhiên), làm như sau

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

Sau đó, trong bạn đặt các lớp chức năng, làm như sau

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); 
    } 

Điều đó sẽ làm điều đó.