var garbage = document.getElementById("garbage");
garbage.addEventListener("click",function(){
garbage.style.color = "#66c144";
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div id="garbage">
<i class="fas fa-trash"></i>
</div>
您好，我正在尝试通过单击图标来更改字体很棒的垃圾图标的字体颜色。但是，它不起作用。我将不胜感激有关如何完成这项工作的任何提示。
var trash = document.getElementById("trash"),
glass = document.getElementById("glass"),
organic = document.getElementById("organic"),
plastic = document.getElementById("plastic"),
paper = document.getElementById("paper");
trash.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
glass.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
organic.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
plastic.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
paper.children[0].style.color = "#ffffff";
});
paper.addEventListener("click",function(){
this.children[0].style.color = "#66c144";
trash.children[0].style.color = "#ffffff";
glass.children[0].style.color = "#ffffff";
organic.children[0].style.color = "#ffffff";
plastic.children[0].style.color = "#ffffff";
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div class="icons flex">
<div id="trash">
<i class="fas fa-trash"></i>
</div>
<div id="glass">
<i class="fas fa-wine-glass"></i>
</div>
<div id="organic">
<i class="fab fa-envira"></i>
</div>
<div id="plastic">
<i class="far fa-hdd"></i>
</div>
<div id="paper">
<i class="far fa-newspaper"></i>
</div>
</div>
UPDATE
So Thanks to everyone's help, I managed to get the result I wanted (Every time I click a different icon, only the icon I click has the different color). On top of that, I am curious if there is a less repetitive or messy way to execute what I have now like using "Function" or something. I would appreciate if I can get some tips on it.
你错过了);收市后}:
var garbage = document.getElementById("garbage");
garbage.addEventListener("click",function(){
garbage.style.color = "#66c144";
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<div id="garbage">
<i class="fas fa-trash"></i>
</div>
Note:你不需要target the parent，你可以只给id到图标。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
