Question

我正在尝试更改背景图片＆＃39;每当变量＆＃39; healthPotionAmount达到零时，div。我想要的是，当满足条件时，结果图片是：＆＃34; http://i.imgur.com/RvhXjej.jpg＆＃34;当盘旋时，没有明显的区别。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

帮助表示感谢， Macint0sh_Plus

Answer 1

这应该可以解决问题

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 2

你去！我提示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 3

试试这个解决方案，它使用JavaScript - 所以不需要jQuery或任何框架。

您可以删除此临时变量

var healthPotionAmount = 0;

来自代码的

只是为了让您可以在StackOverflow上无错误地进行测试。

＆＃13;

// 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";
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 4

希望这会帮助你。我想象你想要用它来做什么。只要你点击药水，这就会减少健康药水。

＆＃13;

//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;
}

＆＃13;

#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');
}

＆＃13;

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

＆＃13;

如何在Javascript中使用条件更改Div的背景图像

4 个答案: