通过JS更改CSS仅影响第一个数组项

Question

当玩家的火箭与行星碰撞时，我尝试更改对象的CSS display属性，当玩家靠近行星时，一些文本显示，当它飞走时，该文本消失。

据我所知，这可能是我将商品重置为display: none的问题

当我在else if旁边导航时，完全删除它们会显示正确的项目。

this.planetArr          = function(x, y, r, c, n){
    this.planet.push        ( new Game.World.Planet(x, y, r, c, n))
};

var item                = null;
var plyr                = this.player;

this.update             = function(){
    var p = this.planet.length - 1;

    for(p; p > -1; --p){
        var plnt = this.planet[p];

        if(this.vector.checkCollision(plyr, plnt)) {
            item = document.querySelector('#' + plnt.name);
            item.style.display = 'block';
        } else if (item) {
            item.style.display = 'none';
            item = null;
        }
    }
};

只有数组中的第一项按预期工作，其余的似乎跳过了样式更改为display: block并直接进行了display: none重置。