Boostrap在点击

Question

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

现在：

点击灰色的空心会给出满满的灰色心脏

我需要： 点击灰色的空心会给出满满的RED心脏

$(function($) {
  $(document).on('click', '.box-btn', function(event) {
    var target = $(event.target).closest('.wrapper');
    target.find('.glyphicon').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;

}

<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

您可以使用另一个类使用toggleClass()使用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>