ブートストラップ4-プログレスバーがブラウザで動作しない

私はブートストラップv4.0.0-alpha.6を使用しています。私が実行したいコードはjs fiddleでうまく動作しますが、一度サーバーを実行すると、プログレスバーは表示されません。私が間違っているところにあるアイデアは？ここでブートストラップ4-プログレスバーがブラウザで動作しない

は私のJS Fiddle

へのリンク以下のコードは、ブートストラップを持っているPHPのページのページです。

<!DOCTYPE HTML> 

<html> 

<head> 


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

<script> 


var progressBar = $('.progress-bar'); 
var percentVal = 0; 


window.setInterval(function(){ 
    percentVal += 20; 
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100) 
    { 
     var link = document.getElementById('nav-ask'); 
link.style.display = 'none' 
    } 

}, 500); 
</script> 

</head> 

<body> 



    <div class="row"> 
     <div class="col-xs-8"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div>

出典

2017-08-28 user3402248

チェックコンソールとその内容を教えてください – coderredoc

ページが読み込まれた後にコンソールが空白になっています。エラーは表示されません。 – user3402248

答えを確認してください。今すぐ動作します – coderredoc

スクリプトを実行すると、ページは準備ができていません。だから、htmlが読み込まれた後にスクリプトを置くだけです。その後、それは動作します。

... 
<div class="row"> 
     <div class="col-md-12"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div> 

<script> 
Your script here. 
</script> 
</body>

私は正しく見ることができるようにサイズをcol-md-12にしました。

代替ソリューション： -

あなたはjQueryの使用に

$(document).ready(function(){ 
    your script 
})

を使用しているので、これはそれを動作させるためにページの一番下にあなたのコードを配置する必要がなくなります。

出典

2017-08-28 20:29:10 coderredoc

ブートストラップ4-プログレスバーがブラウザで動作しない

答えて

関連する問題