寫入有關的和多種功能

Question

我編寫代碼：

（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'); 
}); 

但是，問題是我無法一起維護這些功能。所以，在一個函數內部其他函數以錯誤的方式調用。我怎樣才能使這些功能寫得很好？你能幫我嗎？

Fiddle Demo For testing

Answer 1

您可以檢查這個例子。 Fiddle

（1） 按照

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