CODEWITHSUNDEEP
jquery
user1896653
user1896653

Reputation: 3327

Writing related and multiple functions

I write code for:

(1)

// Follow Button click action
$('body').on('click' , '.btn-follow', function() { 
  $(this).removeClass('btn-follow').addClass('btn-following');
  $(this).text('Following');

  // call followingHover function to get the action of that button
  followingHover();
});

(2)

// Hover on Following Button
function followingHover() {
  $('.btn-following').hover(
    function() {
      $(this).addClass('btn-unfollow');
      $(this).text('Unfollow');
    }, function() {
      $(this).removeClass('btn-unfollow');
      $(this).text('Following');
    }
  );
};

followingHover();

(3)

// Following Button click action
$('body').on('click', '.btn-following', function() { 
  $(this).removeClass('btn-following').addClass('btn-follow');
  $(this).text('Follow');
});

But, the problem is I can't maintain these functions together. So, inside one function other function is calling in wrong way. How can I make these set of functions well-written? Will you please help me?

Fiddle Demo For testing

Upvotes: 1

Views: 42

Answers (1)

mr.
mr.

Reputation: 679

You can check this example. Fiddle

(1) Follow 

    <div class="action-list-item">
      <a href="#" class="btn  btn-action btn-follow" type="button">Follow</a>
    </div>

    <div class="action-list-item">
      <a href="#" class="btn  btn-action btn-following" type="button">Following</a>
    </div>

(2)

  $(document).ready(function(){

$("body").on("mouseenter",".btn-following",function(){
$(this).text("Unfollow")
}).on("mouseleave",".btn-following",function(){
 $(this).text("Following")
})
})
// Following Button click action
$("body").on("click",".btn",function(){
if($(this).hasClass("btn-follow")){
   $(this).text("Following");
   $(this).removeClass("btn-follow").addClass("btn-following");

}else{
 $(this).text("Follow");
 $(this).removeClass("btn-following").addClass("btn-follow");
}
 })

(3)

.action-list-item {
  margin: 20px;
}

.btn-action {
  background-color: yellow;
  color: #333;
  border-color: #af932c;
  width: 86px;
}
.btn-following {
  background-color: green;

}
.btn-following:hover{
  background:red;color:white;
  content:"Unfollow";
  }
.btn-action.btn-unfollow {
  background-color: #9e3515;
}

Upvotes: 3

Related Questions