Jquery 与写作相关的多种功能
我为以下内容编写代码: (一) (二) (三) 但是,问题是我不能同时维护这些功能。因此,在一个函数中,另一个函数以错误的方式调用。如何编写这些函数集?你能帮帮我吗Jquery 与写作相关的多种功能,jquery,Jquery,我为以下内容编写代码: (一) (二) (三) 但是,问题是我不能同时维护这些功能。因此,在一个函数中,另一个函数以错误的方式调用。如何编写这些函数集?你能帮帮我吗 您可以检查此示例。 (一) 跟随 (三) 谢谢我需要做的一件事是:只有当“Unfollow”文本出现时,红色背景色才会出现。在小提琴上,当我点击第一个“Follow”按钮时,它将变为“Following”,在更改时,该按钮上仍然有光标,它显示红色背景色。这个怎么样?只有在没有背景色的情况下,“Unfollow”状态下才能有多个可
您可以检查此示例。 (一) 跟随 (三)
谢谢我需要做的一件事是:只有当“Unfollow”文本出现时,红色背景色才会出现。在小提琴上,当我点击第一个“Follow”按钮时,它将变为“Following”,在更改时,该按钮上仍然有光标,它显示红色背景色。这个怎么样?只有在没有背景色的情况下,“Unfollow”状态下才能有多个可用属性,如图标、背景图像等。与每次通过Jquery添加这些属性不同,我更喜欢为“Unfollow”状态添加一个类,并定义该类中的所有属性。顺便说一下,谢谢你的帮助。我的问题终于解决了。
// 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();
});
// 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();
// Following Button click action
$('body').on('click', '.btn-following', function() {
$(this).removeClass('btn-following').addClass('btn-follow');
$(this).text('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>
$(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");
}
})
.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;
}