バーがいっぱいになるとdivが表示されるようにする方法[JS]

Question

私の名前はDanielで、私は学校で飲むゲームを作っていますが、バーがいっぱいになると表示されるようにしますバーがいっぱいで、あなたがゲームに勝つときを知っている）が、私はこれを行う方法がわからない...

私を助けてもらえますか？

HTML：

<div class="col-xs-12" style="display: none;" id="hiddenText"> 
<div id="bar" class="animated bounceInUp"> 
</div> 
</div> 

CCS：

#bar { 
    background-color: #F8F8F8 ; 
    width: 340px; 
    height: 24px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#bar > div { 
    margin-top: 30px; 
    max-width: 334px; 
    width: 100%; 
    height: 16px; 
    background: #9d3349; 
    position: relative; 
    top: 4px; 
    left: 3px; 
    transition: width 500ms; 
} 

JS：

var jumpsize = 2.77, // % 
    body = $("body"); 
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
    px 
) { 
    return 100 * px/container.width(); 
}), (set = function(pcnt) { 
    bar.css({ width: pcnt + "%" }); 
}); 

body 
    .on("click", ".card1, .card2, .card3, .card4", function() { 
    set(topcnt(bar.width()) + jumpsize); 
    }); 

set(0); 

Answer 1

なぜ機能していないのは、if文を関数clickに入れて忘れたからです。したがって、if文は一度だけ実行されます。最初のロード時にはfalseになります。コードを修正するには、Body.onclickのif文を移動します。

次回は、関数に関連する完全なjavascriptを含めることは賢明でしょう。

オンラインコードを見て、問題を見つけることができました。

これがあなたの問題を解決することを願っています。

〜ヤニック

Answer 2

、あなたの目標を達成すると、あなたがする必要がありますDisplay = noneのCSSスタイルを削除します。

W3の学校ページは、ここでいくつかの詳細を学ぶのに役立つ情報があります。

https://www.w3schools.com/jsref/prop_style_display.asp

あなたがバーを表示させる必要があります表示するには、あなたの目標に到達したときに挿入し、以下の行。あなたはjQueryのを使用している

document.getElementById("hiddenText").style.display = "block"; 

Answer 3

とても速くなります。

$('#hiddenText').show(); 

編集：あなたはプログレスバーでのdivを見ることができるように すっごく

if($('#bar').children('div').width() >= 334){ 
$('#hiddenText').show(); 
} 

が最大OD 334ピクセルを持つことができます。それがあるかどうかをチェックし、はいの場合はテキストを表示します。私はあなたがこれをしたいかわからない

Answer 4

そのクリックイベントでこれを入れて、これ試してください：あなたは、物事にと少し過度に複雑しているよう

var jumpsize = 2.77, // % 
 
    width = 0, 
 
    body = $("body"); 
 
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
 
    px 
 
) { 
 
    return 100 * px/container.width(); 
 
}), (set = function(pcnt) { 
 
    bar.css({ width: pcnt + "%" }); 
 
    if(pcnt >= 100) {$('#hiddenText').show();} 
 
}); 
 

 
body 
 
    .on("click", ".card1, .card2, .card3, .card4", function() { 
 
    width += jumpsize; 
 
    set(topcnt(width)); 
 
    }); 
 

 
set(0);

#bar { 
 
    background-color: #F8F8F8 ; 
 
    width: 340px; 
 
    height: 24px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
#bar > div { 
 
    margin-top: 30px; 
 
    max-width: 334px; 
 
    width: 100%; 
 
    height: 16px; 
 
    background: #9d3349; 
 
    position: relative; 
 
    top: 4px; 
 
    left: 3px; 
 
    transition: width 500ms; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-xs-12" style="display: none;" id="hiddenText"> 
 
<div id="bar" class="animated bounceInUp"> 
 
    <div></div> 
 
</div> 
 
</div> 
 
<button class="card1">click me</button>

Answer 5

は私には思えますパーセント計算。私は0から始まるバーの幅の変数を追加し、クリックごとにジャンプサイズでこれを増やすだけです。この新しい変数が100以上になると、隠れたdivが表示されます。

HTML

<div class="col-xs-12" id="hiddenText"> 
    <div id="bar" class="animated bounceInUp"> 
    <div></div> 
    </div> 
</div> 
<button id="button">Click me</button> 
<div id="showOnComplete">Show me when the bar is full!</div> 

CSS

#bar { 
    width: 340px; 
    height: 24px; 
    padding: 4px 3px; 
    margin: 30px auto 0; 
    background-color: #f8f8f8; 
} 

#bar > div { 
    position: relative; 
    float: left; 
    height: 100%; 
    width: 0; 
    max-width: 100%; 
    background: #9d3349; 
    transition: width 500ms; 
} 

#button { 
    margin: 20px auto; 
    display: block; 
} 

#showOnComplete { 
    width: 400px; 
    padding: 20px; 
    margin: 20px auto; 
    background: blue; 
    color: #fff; 
    text-align: center; 
    display: none; 
} 

JS

(function($) { 
    var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often 
     barWidth = 0, 
     $bar, 
     $showOnComplete; 

    $(function() { 
    $bar = $("#bar").children("div"); 
    $showOnComplete = $("#showOnComplete"); 

    $(document).on("click", "#button", function() { 
     barWidth += jumpSize; 
     $bar.width(barWidth + "%"); 
     if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar 
    }); 
    }); 
})(jQuery); 

私はそれのためのフィドルを作ったhere。