CODEWITHSUNDEEP
jqueryhtmlcsstextonclick
Austin Perez
Austin Perez

Reputation: 597

Change text on click without losing original CSS

I am new to Jquery and Javascript and been having some trouble changing the "like" button to "liked" when it has been clicked.

I have managed to change the color of the button and contents on click, but when I would add an if/else statement to have it change the like to liked, it would remove the span glyphicon and also the css features. The like would change to liked, but would remove the glyphicon, border radius, border width, button height, etc.

I have looked at other Stack Overflows's posts about changing text on click, but I could not find anything on this kind of issue.

Thanks for any help!

$(function() {
    $('#object_heart').click( function(){
        $(this).find('span').css('color', '#8b35ee');
        $('#social_buttons').find('#object_heart').css('color', '#8b35ee');
        $('#social_buttons').find('#object_heart').css('border-color', '#8b35ee');
    });
});
.object_social {
    display: inline-block;
    position: relative;
    left: 0;
    border-color: #d0d0d0;
    border-style: solid;
    border-width: thin;
    border-radius: 5px;
    min-height: 28px;
    max-height: 28px;
    vertical-align: middle;
    color: #888888;
}
.object_social:visited {
        border-color: #d0d0d0;
        backround: none;
        outline: none;
    }
.object_social:focus {
        outline: none;
    }
.object_social:hover {
        border-color: #a2a2a2;
    }
.object_social:hover .icon-Heart {
        transition: 0.7s;
        color: #ae68ff;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="object_heart" class="object_social">
  <span class="icon-Heart"></span>
  &nbsp;Like
</button>

Upvotes: 1

Views: 591

Answers (3)

Red2678
Red2678

Reputation: 3297

$(function() {
  $('#object_heart').click(function() {
    var $this = $(this);

    if ($this.find('span:last-of-type').html() === 'Like') {
      $this.css('color', '#8b35ee').css('border-color', '#8b35ee').find('span:first-of-type').css('color', '#8b35ee');
      $this.find('span:last-of-type').html('Liked')
    } else {
      $this.css('color', '#888888').css('border-color', '#d0d0d0').find('span:first-of-type').css('color', '#888888');
      $this.find('span:last-of-type').html('Like')
    }

  });
});
.object_social {
  display: inline-block;
  position: relative;
  left: 0;
  border-color: #d0d0d0;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  min-height: 28px;
  max-height: 28px;
  vertical-align: middle;
  color: #888888;
}
.object_social:visited {
  border-color: #d0d0d0;
  background: none;
  outline: none;
}
.object_social:focus {
  outline: none;
}
.object_social:hover {
  border-color: #a2a2a2;
}
.object_social:hover .icon-Heart {
  transition: 0.7s;
  color: #ae68ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="object_heart" class="object_social">
  <span class="icon-Heart"></span>
  <span>Like</span>
</button>

Upvotes: 2

isherwood
isherwood

Reputation: 61063

This can all be simplified to a single class toggle, and the rest is handled by CSS:

$(function() {
  $('#object_heart').click(function() {
    $(this).toggleClass('liked');
  });
});
.object_social {
  cursor: pointer;
  display: inline-block;
  position: relative;
  left: 0;
  border-color: #d0d0d0;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  min-height: 28px;
  max-height: 28px;
  vertical-align: middle;
  color: #888888;
}
.object_social.liked span {
  color: red;
}
.object_social .liked-text {
  display: none;
}
.object_social.liked .liked-text {
  display: inline;
}
.object_social.liked .like-text {
  display: none;
}
.object_social .icon-Heart {
  display: none;
}
.object_social.liked .icon-Heart {
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="object_heart" class="object_social"> <span class="icon-Heart">x</span>
  <span class="like-text">Like</span>
  <span class="liked-text">Liked</span>
</button>

Obviously I haven't included all your desired changes, but you get the idea. Manipulating CSS with a bunch of jQuery statements is messy and difficult to maintain. Imagine if you wanted to change the color of your buttons site-wide, for example.

Upvotes: -1

Jake Hargus
Jake Hargus

Reputation: 362

See if this helps you in the right direction:

$(function() {
$('#object_heart').click( function(){

    $(this).find('span').css('color', '#8b35ee');
    $('#social_buttons').find('#object_heart').css('color', '#8b35ee');
    $('#social_buttons').find('#object_heart').css('border-color', '#8b35ee');
    if($(this).html() === "&nbsp;Like"){
        $(this).html("&nbsp;Liked");
    } else {
        $(this).html("&nbsp;Like");
    }
});
});

here's the jsFiddle:

https://jsfiddle.net/2qrvssfr/1/

Upvotes: 0

Related Questions