Question

更改类时遇到问题。如果我将像素硬编码到样式更改中，但想要使用类和CSS的较干净版本，则可以使其工作。目标是使像素变化大小由于width的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

您的代码段似乎可以按照您描述的方式工作-假设您的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>

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

1 个答案: