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>