試圖實施一個簡單的響應式進度欄，問題

我按照網站的指示獲取了信息，現在我被卡住了。代碼如下：試圖實施一個簡單的響應式進度欄，問題

HTML

<div class="progress-wrap progress" data-progress-percent="25"> 
    <div class="progress-bar progress"></div> 
</div>

CSS代碼

.progress { 
    width: 100%; 
    height: 50px; 
} 

.progress-wrap { 
    background: #f80; 
    margin: 20px 0; 
    overflow: hidden; 
    position: relative; 
} 

.progress-bar { 
    background: #ddd; 
    left: 0; 
    position: absolute; 
    top: 0; 
}

和JS

// on page load... 
moveProgressBar(); 
// on browser resize... 
$(window).resize(function() { 
    moveProgressBar(); 
}); 

// SIGNATURE PROGRESS 
function moveProgressBar() { 
    console.log("moveProgressBar"); 
    var getPercent = ($('.progress-wrap').data('progress-percent')/100); 
    var getProgressWrapWidth = $('.progress-wrap').width(); 
    var progressTotal = getPercent * getProgressWrapWidth; 
    var animationLength = 2500; 

    // on page load, animate percentage bar to data percentage length 
    // .stop() used to prevent animation queueing 
    $('.progress-bar').stop().animate({ 
     left: progressTotal 
    }, animationLength); 
}

隨着JavaScript文件，當我在Chrome瀏覽器加載我得到一個錯誤

Uncaught TypeError: Cannot call method 'data' of null

我不知道接下來要做什麼。我已經廣泛搜索了Google，但是我對JavaScript的知識正在慢慢地困擾着我。

來源

2013-05-09 timelord50

這看起來好像您的代碼在加載DOM之前正在運行。是頁面加載//上面的註釋意味着所有的代碼運行在$（document）.ready（）的調用中？如果沒有，我認爲這可能是你的問題。 – 2013-05-09 13:41:02

您的代碼無錯地運行。我只是改變HTML部分來自這樣的：

<div class="progress-wrap progress" data-progress-percent="25">

這個

<div class="progress-wrap progress" data-progress-percent="25"> 
    <div class="progress progress-bar"/> 
</div>

使動畫是可見的。

你在那裏工作JSFiddle。

根據您提供的錯誤消息，我會說你在其他地方有問題。

來源

2013-05-09 13:44:44 PrimosK

我在這個網站上的第一個問題，我輸入了一切錯誤大聲笑代碼示例沒有包括這一點，雖然它在那裏，當我編輯它。所有這一部分是存在的是否有我可以採取任何步驟來診斷它？ – timelord50 2013-05-09 14:03:07

請查看以下內容：[Chrome DevTools]（https://developers.google.com/chrome-developer-tools/）部分[使用控制檯]（https://developers.google.com/chrome- developer-tools/docs/console）和[調試JavaScript]（https://developers.google.com/chrome-developer-tools/docs/javascript-debugging）。嘗試找出錯誤發生的位置並提出新的問題（不要忘記提供錯誤發生的代碼段）。 – PrimosK 2013-05-09 14:07:27

好的，謝謝你的幫助 – timelord50 2013-05-09 14:35:04

試圖實施一個簡單的響應式進度欄，問題

回答

相關問題