2 scripttao ScriptTao 于 2017.09.12 17:53 提问

这个js函数我该怎么写

function choicebutton(coverbutton,cover,up,down,butt){
var flag=true;
$(coverbutton).on('click',function(){
if(flag && coverbutton=='.scene-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.scene-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
};
if(flag && coverbutton=='.entity-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.entity-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
};
if(flag && coverbutton=='.admin-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.admin-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
}
});
};

3个回答

zxgmlcj
zxgmlcj   2017.09.12 22:03
已采纳

设置样式的代码结构类似,完全可以拿出来重构。
设计函数,函数作用是改变样式,参数为四个参数。
每次调用只需一行。

qq_29594393
qq_29594393   Ds   Rxr 2017.09.12 20:20

把你要改变的样式写入css里面,改为两个class
函数里面的话 直接 $().toggleClass("xxx") 就可以了

zxgmlcj
zxgmlcj 思路不错。但是感觉并不能解决楼主的问题!!
2 个月之前 回复
ScriptTao
ScriptTao   2017.09.15 11:06

//左侧选项栏的动效
function listdown(cover,up,down,butt){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
};

function listup(cover,up,down,butt){
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
};

function scene(){
var flag=true;
$('.scene-button').on('click',function(){
if(flag){
listdown('.cover2','.sceneup','.scenedown','.scene');
$('.admin').animate({top: '-66px'}, 500, 'swing');
$('.entity').animate({top: '0px'}, 500, 'swing');
$('.entity').css('border-top','1px solid #dbdbdb');
flag=false;
}else{
listup('.cover2','.sceneup','.scenedown','.scene');
$('.admin').animate({top: '-132px'}, 500, 'swing');
$('.entity').animate({top: '-66px'}, 500, 'swing');
$('.entity').css('border-top','white');
flag=true;
};
});
};
scene();

function entity(){
var flag=true;
$('.entity-button').on('click',function(){
if(flag){
listdown('.cover4','.entityup','.entitydown','.entity');
$('.entity-button').css('background-color','#f4fbfb');
$('.admin').animate({top: '-66px'}, 500, 'swing');
flag=false;
}else{
listup('.cover4','.entityup','.entitydown','.entity');
$('.entity-button').css('background-color','white');
$('.admin').animate({top: '-132px'}, 500, 'swing');
flag=true;
};
});
};
entity();

function admin(){
var flag=true;
$('.admin-button').on('click',function(){
if(flag){
listdown('.cover6','.arrowup','.arrowdown','.admin');

$('.admin-ul').css('display','inline-block');
$('.admin-button').css('background-color','#f4fbfb');
flag=false;
}else{
listup('.cover6','.arrowup','.arrowdown','.admin');
$('.admin-button').css('background-color','white');
$('.admin-ul').css('display','none');
flag=true;
};
});
};
admin();

Csdn user default icon
上传中...
上传图片
插入图片