单击CSS中的图标时如何更改颜色

Question

I'm facing about the problem of change color when click on icon heart in css and jquery

css:

when not yet click icon

.iconHeartInactive::before {
   content: '\e841';
   color: rgba(71,78,82,.4);
 }

when clicked icon:

.iconHeartActive::after{
    content: '\e845';
    color: #ed1b77;
 }

HTML:

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly"></i>
        <i class="iconHeartEmpty typeReversed iconOnly"></i>
    </span>
</button>
</span> 
<script>
   $( "iconHeartInactive" ).click(function() {
   $( this ).toggleClass( "iconHeartActive" );
 });
 </script>

How can I click on icon and it change color? thank so much !

Answer 1

First of all: put your JS code in a ready wrapper:

$(document).ready(function(){
  //your code here
});

Second: We use toggleClass to set and unset a class on an object so you have 2 option. 1- change your CSS so in default it get your inactive style and when clicked on it it get the active styling. 2- change the js to check if it has the active class or not so based on THAT statement you decied wheter or not to set one of your classes.

since it seems you don't want to change your styling:

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive chosenHeartIcon iconOnly"></i>
        <i class="iconHeartEmpty typeReversed iconOnly"></i>
    </span>
</button>
</span> 
<script>
    $(document).ready(function(){
       $( ".chosenHeartIcon" ).click(function() {
        if($(this).hasClass('iconHeartActive')) {
            $( this ).removeClass( "iconHeartActive" );
            $( this ).addClass( "iconHeartInactive" );
        } else {
            $( this ).removeClass( "iconHeartInactive" );
            $( this ).addClass( "iconHeartActive" );
        }

     });
 });
 </script>

Answer 2

1 Fiddle Link http://jsfiddle.net/JfGVE/2029/

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly"></i>
<i class="iconHeartEmpty typeReversed iconOnly"></i> 
    </span>
</button>
</span> 



//CSS Code

button{
  width: 100px;
  height: 50px;
  position: relative;
}

 .iconHeartEmpty::before{
   content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .iconHeartActive::after{
      content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: red;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .hide{
   display: none;
 }



//Script

 $( ".saveHome" ).click(function() {
   $(".stackIcons i" ).toggleClass( "hide" );
 });