循环按钮和改变样式

Question

我是Javascript的全新，所以有你的想法！ 我有三张照片，下面有三个按钮。一个大拇指，infosymbol和垃圾桶。当我点击一个按钮（我不希望它在哪个图片下按钮），我想图片和按钮在div消失，而不是出现在div大拇指（如果我点击拇指上图标）。 我到目前为止，但只适用于图片下的特定按钮，我不能更改出现的图标上的字体样式。

var tumme = document.getElementsByClassName("btn-primary")[0]; 
 
var div = document.getElementsByClassName("col-md-4")[0]; 
 
tumme.addEventListener("click", function() { 
 
    div.outerHTML = '<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>'; 
 
    div.style.backgroundColor = "red"; 
 
});

.col-md-4 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
@media (min-width: 768px) and (max-width: 992px) { 
 
    .col-center { 
 
    float: none; 
 
    margin: 0 auto; 
 
    } 
 
} 
 
.linje-botten { 
 
    border-bottom: 3px solid black; 
 
} 
 
li:hover { 
 
    background-color: #1a542b; 
 
} 
 
.navbar-nav { 
 
    margin: 0px; 
 
    font-size: 1.4em; 
 
} 
 
/* #1a542b #eb9822 */ 
 

 
.navbar-inverse .navbar-nav>li>a { 
 
    color: white; 
 
} 
 
.col-xs-6 { 
 
    margin-bottom: 5px; 
 
} 
 
img { 
 
    margin-bottom: 3px; 
 
} 
 
.navbar-inverse { 
 
    box-shadow: #515d63 4px 4px 4px; 
 
} 
 
body { 
 
    background-color: #eb9822; 
 
}

<script src="https://use.fontawesome.com/ab9989071e.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <header class="col-md-12 col-xs-12 text-center"> 
 
     <h1 class="linje-botten">A&amp;A-design</h1> 
 
     <!--fixa någon logga här--> 
 
     <nav class="navbar navbar-inverse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="bakgrund"><a href="om.html">Om oss</a> 
 
      </li> 
 
      <li class="bakgrund"><a href="projekt.html">Tidigare projekt</a> 
 
      </li> 
 
      <li class="bakgrund"><a href="priser.html">Priser</a> 
 
      </li> 
 
      <li class="bakgrund"><a href="kontakt.html">Kontakt</a> 
 
      </li> 
 
      <li class="bakgrund"><a href="hitta.html">Hitta hit</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </header> 
 
    <main> 
 
     <div class="col-md-4 col-xs-6"> 
 
     <img src="../f%C3%B6retag/bilder/data1.jpg" alt=""> 
 
     <button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button> 
 
     <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button> 
 
     <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button> 
 
     </div> 
 
     <div class="col-md-4 col-xs-6" id="butt"> 
 
     <img src="../f%C3%B6retag/bilder/data2.jpg" alt=""> 
 
     <button id="button" class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button> 
 
     <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button> 
 
     <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button> 
 
     </div> 
 
     <div class="col-md-4 col-xs-6 col-center"> 
 
     <img src="../f%C3%B6retag/bilder/data3.jpg" alt=""> 
 
     <button class="btn btn-block btn-primary" type="button"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>Gilla</button> 
 
     <button class="btn btn-block btn-info" type="button"><i class="fa fa-info" aria-hidden="true"></i>Info</button> 
 
     <button class="btn btn-block btn-danger" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Skicka till papperskorgen</button> 
 
     </div> 
 
    </main> 
 
    </div> 
 
</div>

Answer 1

在香草JS，你可以做这样的事情：

var tumme = document.getElementsByClassName("btn-primary"); 

for(i=0;i<tumme.length;i++) { 
tumme[i].onclick=function() { 

this.parentElement.outerHTML = '<i class="fa fa-thumbs-o-up big-thumb" aria-hidden="true"></i>'; 

} 
}; 

通知，我已经添加了。大拇指类（可以设置所需的值在css中）：

.big-thumb { 
    font-size:50px!important; 
    background:red; 
} 

演示：https://jsfiddle.net/cyvq9gzv/1/

Answer 2

像这样的事情？
编辑：

var thumbsUp = '<i class="fa fa-thumbs-o-up" aria-hidden="true" style="font-size:40px"></i>'; 
var tumme = document.getElementsByClassName("btn-primary"); 
for (var i = 0; i < tumme.length; i++) { 
    tumme[i].addEventListener("click", function() { 
    this.parentNode.innerHTML = thumbsUp; 
    }); 
} 

https://fiddle.jshell.net/ffsdq1bu/2/