javascript - 循环按钮和改变风格

Question

我是 Javascript 的新手，所以请记住这一点!我有三张照片，下面有三个按钮。竖起大拇指，信息符号和垃圾桶。当我点击一个按钮时(我不希望按钮位于哪张图片上)我希望 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

在 vanilla 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>';

}
};

注意，我添加了 .big-thumb 类(您可以在 css 中设置所需的值):

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

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