Question

如果这是一个很糟糕的问题我提前道歉，我会尽量让它尽可能清楚。

我正在制作一个来自jquery + HTML 5的游戏。这是一个基于圆形的游戏，如果你赢了一轮，轮数增加1，如果你输了，圆数重置为0.例如：

    endGame: function() {
        $($('[data-round]').get(0)).text('0');

这一切都很完美，我需要的是根据$('[data-round]'更改CSS元素。每次数量增加时，我需要一个CSS元素，将高度增加20px。

具体做法是：

我需要增加#fill{ height: 0px;} + 20px。每次$('[data-round]')增加1.然后，如果$('[data-round]')返回0，#fill{ height: 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>

Answer 1

试试这个

$('#fill').css({
    height: parseInt($('[data-round]').data('round')) * 20 + 'px' 
});

不确定$('[data-round]')会返回什么值，因为您没有在此处显示标记。

Answer 2

设置变量以存储fillHeight值。然后运行一个if语句来查看数据轮是否大于0.如果是，则向fillHeight var添加20，否则将fillHeight重置为0.

var fillHeight = 0;

if('[data-round]' > 0){
    fillHeight + 20;
} else {
    fillHeight = 0;
}

$('#fill').css({'height': fillHeight+'px'});

从数据编号更改css

2 个答案: