点击更改课程

Question

如何完成这个：

点击box-btn

1. Box btn会更改图标
2. 文字和标题将采用不同的颜色
3. Box Image获得一些叠加

此更改将一直有效，直到我再次单击，然后将重新启动到旧类。 谢谢

<div class="col-md-4 wrapper">
  <div class="inner">
    <div class="image-box"></div>
    <div class="main">
     <h2 class="box-title">TITLE</h2>
     <p class="box-text"></p>
     <div class="box-foot">
       <a href="">
         <div class="box-img"></div>
       </a>
       <span class="white-line-vertical"></span>
       <button type="submit" class="box-btn">
         <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
       </button>
      </div>
     </div>
  </div>
</div>

Answer 1

试试这个，

CSS

.clicked {
     color : #ececec; //whatever color you want to change to
 }

JS

$("button.box-btn").on("click", function(){
   $(this).toggleClass("clicked");
   $(this).parent().parent().toggleClass("btn-clicked");
   if($(this).hasClass("clicked")){
     $(this).removeClass("glyphicon-star-empty");
     $(this).addClass("glyphicon-star-full");
   }else{
     $(this).removeClass("glyphicon-star-full");
     $(this).addClass("glyphicon-star-empty");
   }
})