如果这是一个糟糕的问题,我提前道歉,我会尽量说清楚。
我正在用 jquery + HTML 5 制作一个游戏。这是一个基于回合的游戏,如果你赢了一轮,轮数增加 1,如果你输了,轮数重置为 0。示例:
endGame: function() {
$($('[data-round]').get(0)).text('0');
这一切都很好,我需要的是根据 $('[data-round]'
) 更改一个 CSS 元素。每当数字增加时,我都需要一个 CSS 元素将高度增加 20 像素。
具体来说:
我需要增加 #fill{ height: 0px;}
+20px。每次$('[data-round]')
加1。然后如果$('[data-round]')
返回0,#填充{高度:0px;}
所以..
if ('[data-round]') = 0 then #fill{ height: 0px;}
and ('[data-round]') = 1 then #fill{ height: 20px;}
('[data-round]') = 2 then #fill{ height: 40px;}
('[data-round]') = 3 then #fill{ height: 60px;}
等等...有人可以帮忙吗?
HTML 结构:
<h2 id="rnd" style="display: none;">Round: <span style="color:red;" data-round="0">0</span></h2>
<button id="pgb" class="btn1" onclick="showDiv()" data-action="start" >Play Game</button><br>
<p style="display: none;" data-action="lose">Sorry, you lost after <span style="color:red; font-weight: bold;" data-round="0"></span> rounds!</p>
最佳答案
试试这个
$('#fill').css({
height: parseInt($('[data-round]').data('round')) * 20 + 'px'
});
不确定您的 $('[data-round]')
会返回什么值,因为您没有在此处显示标记。
关于javascript - 从数据编号更改 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27222461/