CODEWITHSUNDEEP
jqueryhtmlcssajax
Khanh Luong Van
Khanh Luong Van

Reputation: 515

How to change color when click icon in css

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 !

Upvotes: 0

Views: 14530

Answers (2)

Krishna9960
Krishna9960

Reputation: 529

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

Upvotes: 0

moay
moay

Reputation: 65

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>

Upvotes: 1

Related Questions