Изменить класс по щелчку

Question

как acomplish это:

, когда я нажимаю на box-btn

1. Box btn будет Изменить значок
2. текст и название будет различный цвет
3. Box Изображение получить некоторые наложения

---

Это изменение будет активным до тех пор, пока я не нажму снова, а затем перезапустится до старых классов. Спасибо

<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"); 
    } 
})