如何在JavaScript中使用條件來更改Div的背景圖像

Question

我試圖在變量'healthPotionAmount達到零時更改div的'背景圖像'。我希望當這種情況得到滿足時，最終得到的圖片是：「http://i.imgur.com/RvhXjej.jpg」，當盤旋時沒有顯着差異。

if(healthPotionAmount == 0){ 
 
//What I'm trying to find 
 
}

#healthPotion { 
 
    background-image: url('http://i.imgur.com/EXiNh2M.jpg'); 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#healthPotion:hover { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="healthPotion"></div>

幫助表示讚賞， Macint0sh_Plus

Answer 1

在這裏你去！我提示healthPotionAmount，以便測試這些值。

var healthPotionAmount = prompt('Enter potion amount:'); 
 

 
if (healthPotionAmount == 0) { 
 
    document.getElementById('healthPotion').className += ' empty'; 
 
}

#healthPotion { 
 
    background-image: url('http://i.imgur.com/EXiNh2M.jpg'); 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#healthPotion:hover { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
#healthPotion.empty { 
 
    background-image: url('http://i.imgur.com/RvhXjej.jpg'); 
 
}

<div id="healthPotion"></div>

Answer 2

這應該做的伎倆

var healthPotionAmount = 0; 
 
if(healthPotionAmount == 0){ 
 
//What I'm trying to find 
 
    document.getElementById('healthPotion').className += ' no-potion'; 
 
}

#healthPotion { 
 
    background-image: url('http://i.imgur.com/EXiNh2M.jpg'); 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#healthPotion.no-potion { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
} 
 
#healthPotion:hover { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="healthPotion"></div>

Answer 3

嘗試這種解決方案，它使用JavaScript - 因此沒有必要的jQuery或這裏的任何框架。

您可以從代碼中刪除這個臨時變量

var healthPotionAmount = 0; 

，這只是這樣你就可以運行沒有錯誤，以測試在計算器上。

// Tmp variable here to avoid errors 
 
var healthPotionAmount = 0; 
 

 
if(healthPotionAmount == 0){ 
 
//What I'm trying to find 
 
    var healthPotion = document.getElementById("healthPotion"); 
 
    healthPotion.className += " empty-potion"; 
 
}

#healthPotion { 
 
    background-image: url('http://i.imgur.com/EXiNh2M.jpg'); 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#healthPotion.empty-potion { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
} 
 
#healthPotion:hover { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="healthPotion"></div>

Answer 4

希望這有助於你出去。我有點想象你想用什麼。當你點擊藥水時，這會減少健康藥水。

//define your varaibles first: 
 
var healthPotionAmount = 3; 
 
//Get the DOM elements and store them in variables 
 
var hpEle = document.getElementById("healthPotion"); 
 
var numHpLeftEle = document.getElementById("potionsLeft"); 
 

 
//Set the number of HPs 
 
numHpLeftEle.innerHTML = healthPotionAmount; 
 
//Start to lose some health. 
 
function useHealthPotion() { 
 
    //Stop doing work when we are below 0 HPs 
 
    if(healthPotionAmount <=0) { 
 
    return; 
 
    } 
 
    //Decrement the HP count 
 
    healthPotionAmount = healthPotionAmount-1; 
 

 
    //Add the class when we are empty 
 
    if(healthPotionAmount == 0){ 
 
    hpEle.classList.add("empty"); 
 
    } 
 
    //Update our label. 
 
    numHpLeftEle.innerHTML = healthPotionAmount; 
 
}

#healthPotion { 
 
    background-image: url('http://i.imgur.com/EXiNh2M.jpg'); 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
#healthPotion.empty { 
 
    background-image: url('http://i.imgur.com/nhZaKud.jpg'); 
 
}

<!--Add an onclick handler that will substract one health--> 
 
<div id="healthPotion" onclick="useHealthPotion()"></div>x<span id="potionsLeft"></span>