className 更改不通过所有 if 和 else if 语句

Question

在更改课程时遇到问题。如果我将像素硬编码到样式更改中，但想要使用类和 CSS 的更清晰的版本，我可以让它工作。目标是由于宽度的 healthPercent 值而使像素变化的大小越来越大。这部分有效，但麻烦的部分是更改类以更改条的颜色。出于某种原因，它没有正确地通过 if 语句，并且一直保持绿色直到死亡（对于 healthPercent 而言为零或更小），当它达到零然后变成红色时。我不太明白为什么它通过第一个 if 检查而不是其余的。有关如何解决此问题的任何想法？

编辑：我正在开发一款游戏。只是为了澄清。

JAVASCRIPT

displayLifeBar = function ()
{


    pixelMod = 2.3; //added definition here but global on full code
    healthPercent = 130; //added here for example but passed down
    lifeBar = 'player_lifebar';


    document.getElementById(lifeBar).style.width = healthPercent + 'px';

    var criticalLife = 25 * pixelMod;
    var lowLife = 50 * pixelMod;
    var hurtLife = 75 * pixelMod;

    if (healthPercent <= 0){
        document.getElementById(lifeBar).className = '';
    }        
    else if (healthPercent < criticalLife){
        document.getElementById(lifeBar).className = 'lifebar critical';
    }
    else if (healthPercent < lowLife){
        document.getElementById(lifeBar).className = 'lifebar low';
    }    
    else if (healthPercent < hurtLife){
        document.getElementById(lifeBar).className = 'lifebar hurt';
    }
    else
    {
        document.getElementById(lifeBar).className = 'lifebar';
    }
}

CSS

/* LIFEBAR COLORS STARTS */

.lifebar{
    height:20px;
    background-color: forestgreen;
}
.lifebar.hurt{
    background-color: gold;
}
.lifebar.low{
    background-color: orange;
}
.lifebar.critical{
    background-color: red;
}
/* LIFEBAR COLORS ENDS */

Answer 1

您的代码 sn-p 似乎与您所描述的一致 - 假设您的 HTML 看起来像 <div id='player_lifebar'></div>。

var pixelMod = 2.3;
var healthPercent = 10;
var lifeBar = 'player_lifebar';

displayLifeBar = function ()
{
    document.getElementById(lifeBar).style.width = healthPercent + 'px';

    var criticalLife = 25 * pixelMod;
    var lowLife = 50 * pixelMod;
    var hurtLife = 75 * pixelMod;

    if (healthPercent <= 0){
        document.getElementById(lifeBar).className = '';
    } else if (healthPercent < criticalLife){
        document.getElementById(lifeBar).className = 'lifebar critical';
    } else if (healthPercent < lowLife){
        document.getElementById(lifeBar).className = 'lifebar low';
    }  else if (healthPercent < hurtLife){
        document.getElementById(lifeBar).className = 'lifebar hurt';
    } else {
        document.getElementById(lifeBar).className = 'lifebar';
    }
}

displayLifeBar();


// for testing:
function modifyHealth(points) {
  healthPercent = healthPercent + points;
  displayLifeBar(); //re-render healthbar
}

document.getElementById('heal').addEventListener('click', function() { modifyHealth(10) });
document.getElementById('attack').addEventListener('click', function() { modifyHealth(-10) });

.lifebar{
    height:20px;
    background-color: forestgreen;
}
.lifebar.hurt{
    background-color: gold;
}
.lifebar.low{
    background-color: orange;
}
.lifebar.critical{
    background-color: red;
}

<div id='player_lifebar'></div>
<!-- for testing -->
<br>
<button id='heal'>♡ heal (+10)</button>
<button id='attack'>? attack (-10)</button>