javascript - 从数据编号更改 css

Question

如果这是一个糟糕的问题，我提前道歉，我会尽量说清楚。

我正在用 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>

Answer 1

试试这个

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

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