javascript - 酒吧满时如何使div可见[JS]

我的名字叫丹尼尔（Daniel），我正在为学校制作饮酒游戏，我想在酒吧满的时候让div可见（所以你知道酒吧满的时候你会赢游戏），但我不知道这该怎么做...

你能帮我吗？

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);

最佳答案

它不起作用的原因是因为您忘记将if语句放入您在单击时运行的函数中。因此，if语句仅运行一次。并在第一次加载时将导致错误。要修复您的代码，请在Body.onclick中移动if语句。

下次包含相对于该函数的完整javascript将很明智。

通过查看在线代码，我能够找到问题。

希望这能解决您的问题。

〜扬尼克