Nazywam się Daniel i robię grę do picia dla szkoły, chcę pozwolić DIV, aby stał się widoczny, gdy bar jest pełny (więc wiesz, kiedy pasek jest pełny, a wygrasz grę), ale nie mam pojęcia jak to zrobić...

Czy mógłbyś mi pomóc?

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);
0
Daniel Gotz 28 czerwiec 2017, 11:13

5 odpowiedzi

Najlepsza odpowiedź

Powodem, dla którego nie działa, ponieważ zapomniałeś umieścić oświadczenie IF w funkcji u uruchomionego na kliknięciu. Więc oświadczenie IF działa tylko raz. i na pierwszym obciążeniu spowoduje fałszywe. Aby naprawić swój kod przesuń instrukcję Jeśli w twoim body.onclick.

Następnym razem byłoby inteligentne dołączenie pełnego JavaScript, który jest w stosunku do funkcji.

Patrząc na kod online, udało mi się znaleźć problem.

Mam nadzieję, że rozwiązuje twoje problemy.

~ Yannick.

0
Yannick Frisart 28 czerwiec 2017, 11:02

Wydaje mi się, jakbyś przecinający rzeczy trochę z obliczeniami procentowymi. Wystarczy dodać zmienną o szerokość paska, który zaczyna się od 0 i zwiększyć to z komiksem na każdym kliknięciu. Gdy ta nowa zmienna przechodzi lub równa się 100 pokażysz ukrytego 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);

Zrobiłem skrzypce dla tego Oto.

0
vi5ion 28 czerwiec 2017, 13:30

Używasz jQuery, więc szybciej będzie:

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

Edytuj: SOOO.

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

Jak widać Div z paskiem postępu może mieć max OD 334 px. Sprawdź, czy go ma, a jeśli tak, pokaż tekst. Umieść to w tym przypadku wydarzenie

0
DanielWaw 28 czerwiec 2017, 08:53

Nie jestem pewien, czy chcesz tego, ale spróbuj tego:

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>
0
Arpad Hollo 28 czerwiec 2017, 08:38

Po trafieniu celu, musisz usunąć stylizacji CSS na wyświetlaczu = Brak.

Strona szkół W3 tutaj, aby uzyskać pomocne informacje, które pomogą Ci nauczyć się więcej.

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

Poniższa linia wstawiona po osiągnięciu celu na wyświetlacz powinna pojawić się pasek.

document.getElementById("hiddenText").style.display = "block";
0
Andy Donegan 28 czerwiec 2017, 08:22