Boostrap改变颜色点击

Question

我得到了这段代码，一切都好，功能齐全。 当我点击时，我需要改变心脏颜色的选项。

现在：

点击灰色的空心脏将充分灰色充分的心脏

我需要： 点击灰色的空心脏将全力冲满心脏

$(function($) { 
 
    $(document).on('click', '.box-btn', function(event) { 
 
    var target = $(event.target).closest('.wrapper'); 
 
    target.find('.glyphicon').toggleClass('glyphicon-heart-empty glyphicon-heart'); 
 
\t 
 
    
 
    }); 
 
});

.box-btn { 
 
    float:left; 
 
    background: transparent; 
 
    font-size: 53px; 
 
    color: #4D4E56; 
 
    font-weight: 300; 
 
    cursor: pointer; 
 
    border-radius: 2px; 
 
    line-height: 0.5; 
 
    border: none; 
 
\t outline:none; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="submit" class="box-btn"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span></button>

Answer 1

您可以使用另一个类来使用用Jquery更改颜色。

试试这个：

$(function($) { 
 
    $(document).on('click', '.box-btn', function(event) { 
 
    $(this).find('.glyphicon').toggleClass('red').toggleClass('glyphicon-heart-empty glyphicon-heart'); 
 
    }); 
 
});

.box-btn { 
 
    float: left; 
 
    background: transparent; 
 
    font-size: 53px; 
 
    color: #4D4E56; 
 
    font-weight: 300; 
 
    cursor: pointer; 
 
    border-radius: 2px; 
 
    line-height: 0.5; 
 
    border: none; 
 
    outline: none; 
 
} 
 
.glyphicon { 
 
    transition: color .3s linear; 
 
} 
 
.box-btn .red { 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="submit" class="box-btn"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> 
 
</button>