Question

我的名字是丹尼尔，我正在为学校做一个喝酒游戏，我想让一个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);

Answer 1

当您点击目标时，您需要删除Display = none。

的CSS样式

W3学校页面提供了一些有用的信息，可以帮助您了解更多信息。

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

当您到达要显示的目标时，下面插入的行应该会显示该栏。

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

Answer 2

你正在使用jQuery这么快：

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

编辑： sooo

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

正如您可以看到带有进度条的div最大可以达到334 px。检查是否有，如果是，则显示文本。把它放在点击事件

中

Answer 3

我不确定你想要这个，但试试这个：

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 4

对我来说，像你一样，用百分比计算过度复杂化了一些东西。我只想为从0开始的条的宽度添加一个变量，并在每次单击时使用jumpsize增加该变量。一旦这个新变量超过或等于100，你就会显示隐藏的div。

<强> HTML

SomeClass sc = ...;
sc.Var2 = null;

<强> CSS

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

<强> JS

#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;
}

我为它做了一个小提琴here。

Answer 5

它不工作的原因是因为你忘了将if语句放在你运行的函数中。所以if语句只运行一次。并且在第一次加载时它将导致错误。要修复代码，请在Body.onclick中移动if语句。

下次包含与该函数相关的完整javascript将是明智的。

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

希望这可以解决您的问题。

〜的Yannick

当酒吧已满时如何让div变得可见[JS]

5 个答案: