1. 程式人生 > >Cannot set property 'display' of undefined【利用Chrome瀏覽器檢視js語法錯誤】

Cannot set property 'display' of undefined【利用Chrome瀏覽器檢視js語法錯誤】

想要實現一個簡單的功能:

預設隱藏一個div,點選後顯示,並可以切換,如下圖所示:



就是這麼簡單的一個問題,還是報錯了。哦,對了,以前不知道怎麼解決前端的問題,一碰到錯誤就懵了。有必要分享下找前端錯誤的一條經驗:

如果用到了jquery,尤其是點選效果,點選後無反應時,第一個要想到的是:“是否有語法錯誤”!

由於一般IDE都不會自動檢查js語法,所以得交給瀏覽器完成。在Chrome瀏覽器下,點右鍵檢查,比如我在“顯示輸入的URL”這裡用到了jquery,但是點了後沒反應,右上角明顯有錯誤出現,看下錯誤詳情。


我的實現程式碼如下:

$("#switchUrl").click(function(){
        var status = $(".showTable").style.display;
        $("#show_url").toggle();
        if (status == 'none') {
            $("#switchUrl").text("隱藏輸入的URL");
        } else {
            $("#switchUrl").text("顯示輸入的URL");
        }

    });

.showTable可以看出這是想通過class取到div,但是注意,不同div可以對應相同的class。所以必須考慮到這樣的情況:一個頁面叫同一個class名字的會有很多,這樣獲取到的就是一個數組形式,我還必需指定我取陣列中的哪一個,必需加上索引才行。(應該考慮我這樣取是不是本身也容易出問題)修改後如下:

$("#switchUrl").click(function(){
        var status = $(".showTable")[0].style.display;
        $("#show_url").toggle();
        if (status == 'none') {
            $("#switchUrl").text("隱藏輸入的URL");
        } else {
            $("#switchUrl").text("顯示輸入的URL");
        }

    });

問題解決!細心啊!我的天!