在课堂上更改图像内的一个类

我的问题是，我试图让5个星星的图像记分牌，当用户得到正确的问题时变亮。这是拥有5张图片的班级。我尝试给每个ID，但我仍然无法弄清楚。在课堂上更改图像内的一个类

<div class="image_line" > 
    <div class="image_cell" id="1"> 
     <img src ="StarOff.gif" /> 
    </div> 
    <div class="image_cell" id="2"> 
     <img src ="StarOff.gif" /> 
    </div> 
    <div class="image_cell" id="3"> 
     <img src ="StarOff.gif" /> 
    </div> 
    <div class="image_cell" id="4"> 
     <img src ="StarOff.gif" /> 
    </div> 
    <div class="image_cell" id="5"> 
     <img src ="StarOff.gif" /> 
    </div> 

</div>

这是我试图用来改变图像的JavaScript。然而，我所拥有的是一个名为corret_answers的变量，它将用于根据其ID来更改每个图像，因此当用户有1个正确答案时，correct_answers = 1，然后使用它来更改图像，因为图像的ID均为1- 5，以配合这个递增变量

document.getElementById("1").src = "StarOn.gif";

Here is an image to show you a little of what it looks like

来源

2015-10-29 Caleb Heath

迦勒你看不到你在做什么愚蠢的事情吗？ :)一旦你仔细查看你的代码，这就是自我回答的问题类型。我可能会建议[橡皮鸭调试]（https://en.wikipedia.org/wiki/Rubber_duck_debugging）为您的未来编程漏洞。 – Alternatex

您分配的ID给div标签，但你需要的ID分配给img标签。然后，你应该得到的参考图像，然后可以改变它的src：

<div class="image_cell"> <img src ="StarOff.gif" id="1"/> </div>

来源

2015-10-29 12:23:02 AlexL

您正在改变src属性<div class="image_cell" id="1">，这是不存在的。你想要做的是访问它的子节点（<img>）代替：

document.getElementById("1").querySelector("img").src = "StarOn.gif";

来源

2015-10-29 12:21:16 Griffith

的jsfiddle：https://jsfiddle.net/CanvasCode/z1fru5f0/

您需要分配您的img标签的ID，而不是DIV，如果您分配divs的ID然后你需要检查它的childNodes。

的Html

<div class="image_line" > 
    <div class="image_cell"> 
     <img id="1" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" /> 
    </div> 
    <div class="image_cell"> 
     <img id="2" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" /> 
    </div> 
    <div class="image_cell"> 
     <img id="3" src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" /> 
    </div> 
    <div id="4" class="image_cell"> 
     <img src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" /> 
    </div> 
    <div id="5" class="image_cell"> 
     <img src ="http://www.gamingevolution.info/screenshots/main.php/d/149898-1/Greystar.gif" /> 
    </div> 

</div>

的javascript

var start1 = document.getElementById("1") 
start1.src = "https://www.fortwhyte.org/wp-content/uploads/2014/08/gold_star.png";

来源

2015-10-29 12:26:09 Canvas

我注意到correct_answer是一个数，所以我它转换为（使用toString）的字符串，以便它可以被用来匹配.image_cellid。我添加了一个input来演示它的实际功能。

见片段

var correct_answer = 0; 
 

 
function starOn(correct_answer) { 
 
    var x = correct_answer.toString(); 
 
    var iCell = document.getElementById(x); 
 
    var iStar = iCell.querySelector('img'); 
 
    iStar.src = "http://findicons.com/files/icons/249/xmas_pack/48/star.png"; 
 
}

.image_cell { 
 
    display: inline-block; 
 
} 
 
input { 
 
    width: 48px; 
 
    text-align: center; 
 
}

<div class="image_line"> 
 
    <div class="image_cell" id="1"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" /> 
 
    </div> 
 
    <div class="image_cell" id="2"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" /> 
 
    </div> 
 
    <div class="image_cell" id="3"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" /> 
 
    </div> 
 
    <div class="image_cell" id="4"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" /> 
 
    </div> 
 
    <div class="image_cell" id="5"> 
 
    <img src="https://cdn0.iconfinder.com/data/icons/super-mono-basic/yellow/star_basic_yellow.png" /> 
 
    </div> 
 

 
</div> 
 
<br/> 
 
<label>Type in a number 1 to 5</label> 
 
<input oninput="starOn(this.value);">

来源

2015-10-29 13:24:26 zer00ne

在课堂上更改图像内的一个类

回答

相关问题