Javascript 组合js脚本函数

我如何结合这一点来减少重复。最好的方法是什么，这样我就不会有重复的点击功能，即使参数不同，你有什么建议来组合lightning功能吗？谢谢

$(document).ready(function(){

    var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;

    lightning_one();
    lightning_two();
    lightning_three();

    $("#head").click(function(){
        if(headclix < 9){
            $("#head").animate({left:"-=367px"}, 500);
            headclix += 1;
        } else{
             $("#head").animate({left:"0px"}, 500);
            headclix = 0;
        }
    })

    $("#eyes").click(function(){
        if(eyeclix < 9){
            $("#eyes").animate({left:"-=367px"}, 500);
            eyeclix += 1;
        } else{
             $("#eyes").animate({left:"0px"}, 500);
            eyeclix = 0;
        }
    })

   $("#nose").click(function(){
        if(noseclix < 9){
            $("#nose").animate({left:"-=367px"}, 500);
            noseclix += 1;
        } else{
             $("#nose").animate({left:"0px"}, 500);
            noseclix = 0;
        }
    })

   $("#mouth").click(function(){
        if(mouthclix < 9){
            $("#mouth").animate({left:"-=367px"}, 500);
            mouthclix += 1;
        } else{
             $("#mouth").animate({left:"0px"}, 500);
            mouthclix = 0;
        }
    })

});//end doc.onready function

function lightning_one(){
    $("#container #lightning1").fadeIn(250).fadeOut(250);
    setTimeout("lightning_one()", 4000);
}

function lightning_two(){
    $("#container #lightning2").fadeIn("fast").fadeOut("fast");
    setTimeout("lightning_two()", 5000);
}

function lightning_three(){
    $("#container #lightning3").fadeIn("fast").fadeOut("fast");
    setTimeout("lightning_three()", 7000);
}

$（文档）.ready（函数（）{
var headclix=0，eyeclix=0，noseclix=0，moutclix=0；
闪电（一）；
闪电二号（）；
闪电（三）；
$（“#头”）。单击（函数（）{
if（头夹<9）{
$（“#头”）.animate（{左：“-=367px”}，500）；
headclix+=1；
}否则{
$（“#头”）.animate（{左：“0px”}，500）；
headclix=0；
}
})
$（“#眼睛”）。单击（函数（）{
如果（眼夹<9）{
$（“#眼睛”）.animate（{左：“-=367px”}，500）；
眼圈+=1；
}否则{
$（“#眼睛”）.animate（{左：“0px”}，500）；
eyeclix=0；
}
})
$（“#鼻子”）。单击（函数（）{
如果（鼻唇<9）{
$（“#鼻子”）.animate（{左：“-=367px”}，500）；
noseclix+=1；
}否则{
$（“#鼻子”）.animate（{左：“0px”}，500）；
noseclix=0；
}
})
$（“#嘴”）。单击（函数（）{
if（moutclix<9）{
$（“#嘴”）.animate（{左：“-=367px”}，500）；
moutclix+=1；
}否则{
$（“#嘴”）.animate（{左：“0px”}，500）；
moutclix=0；
}
})
});//end doc.onready函数
功能lightning_one（）{
$（“#容器#照明1”）.fadeIn（250）。fadeOut（250）；
setTimeout（“lightning_one（）”，4000）；
}
函数lightning_two（）{
$（“#容器#照明2”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_two（）”，5000）；
}
功能lightning_three（）{
$（“#容器#照明3”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_three（）”，7000）；
}

类似的东西

var obj = {
    headclix: 0,
    eyesclix: 0,
    noseclix: 0,
    mouthclix: 0
}

var types = ['head', 'eyes', 'nose', 'mouth'];

for (var i in types) {
    var type = types[i];
    $("#" + type).click(function() {
        if (obj[type + 'clix'] < 9) {
            $("#" + type).animate({ left: "-=367px" }, 500);
            obj[type + 'clix'] += 1;
        } else {
            $("#" + type).animate({ left: "0px" }, 500);
            obj[type + 'clix'] = 0;
        }
    });
}

var obj={
总分：0，
眼圈：0，
noseclix:0，
口型：0
}
变量类型=[‘头’、‘眼睛’、‘鼻子’、‘嘴’]；
for（类型中的变量i）{
变量类型=类型[i]；
$（“#”+类型）。单击（函数（）{
if（obj[type+'clix']<9）{
$（“#”+类型）.animate（{左：“-=367px”}，500）；
obj[type+'clix']+=1；
}否则{
$（“#”+类型）。设置动画（{左：“0px”}，500）；
obj[type+'clix']=0；
}
});
}

这就是我的想法：

$(document).ready(function () {

    var head = {clix: 0, id: $("#head")}, eyes = {clix: 0, id: $("#eyes")}, nose = {clix: 0, id: $("#nose")},
        mouth = {clix: 0, id: $("#mouth")};

    lightning_one();
    lightning_two();
    lightning_three();

    head.click(function () {
        body_clix(head.id, head.clix)
    })

    eyes.click(function () {
        body_clix(eyes.id, eyes.clix)
    })

    nose.click(function () {
        body_clix(nose.id, nose.clix)
    })

    mouth.click(function () {
        body_clix(mouth.id, mouth.clix)
    })

});//end doc.onready function

function body_clix(b_part_id, clix) {
    if (clix < 9) {
        b_part_id.animate({left: "-=367px"}, 500);
        clix += 1;
    } else {
        b_part_id.animate({left: "0px"}, 500);
        mouthclix = 0;
    }
}

function lightning_one() {
    $("#container").find("#lightning1").fadeIn(250).fadeOut(250);
    setTimeout("lightning_one()", 4000);
}

function lightning_two() {
    $("#container").find("#lightning2").fadeIn("fast").fadeOut("fast");
    setTimeout("lightning_two()", 5000);
}

function lightning_three() {
    $("#container").find("#lightning3").fadeIn("fast").fadeOut("fast");
    setTimeout("lightning_three()", 7000);
}

$（文档）.ready（函数（）{
var head={clix:0，id:$（“#head”）}，eyes={clix:0，id:$（“#eyes”）}，nose={clix:0，id:$（“#nose”）}，
mouth={clix:0，id:$（“#mouth”）}；
闪电（一）；
闪电二号（）；
闪电（三）；
head.click（函数（）{
body_clix（head.id，head.clix）
})
眼睛。单击（函数（）{
body_clix（eyes.id，eyes.clix）
})
nose.click（函数（）{
body_clix（nose.id，nose.clix）
})
嘴。单击（函数（）{
body_clix（mouth.id，mouth.clix）
})
});//end doc.onready函数
函数体\u clix（b\u零件\u id，clix）{
如果（clix<9）{
b_part_id.animate（{左：“-=367px”}，500）；
clix+=1；
}否则{
b_part_id.animate（{左：“0px”}，500）；
moutclix=0；
}
}
功能lightning_one（）{
$（“#容器”）.find（#lightning1”）.fadeIn（250）.fadeOut（250）；
setTimeout（“lightning_one（）”，4000）；
}
函数lightning_two（）{
$（“#容器”）.find（#lightning2”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_two（）”，5000）；
}
功能lightning_three（）{
$（“#容器”）.find（#lightning3”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_three（）”，7000）；
}

您可以尝试以下方法：

$（文档）.ready（函数（）{
var clickCounter=[]；
变量类型=[‘头’、‘眼睛’、‘鼻子’、‘嘴’]；
//闪电（一）；
//闪电二号（）；
//闪电（三）；
type.forEach（函数（类型）{
单击计数器[类型]=0；
$（“#”+类型）。单击（函数（）{
processClick（此，类型）；
});
});
函数processClick（元素、类型）{
if（元素）{
如果（单击计数器[键入]<9）{
$（元素）.animate（{左：“-=367px”}，500）；
单击计数器[类型]+=1；
}否则{
$（元素）.animate（{左：“0px”}，500）；
单击计数器[类型]=0；
}
log（type+'：'+点击计数器[type]）；
}
}
功能lightning_one（）{
$（“#容器#照明1”）.fadeIn（250）。fadeOut（250）；
setTimeout（“lightning_one（）”，4000）；
}
函数lightning_two（）{
$（“#容器#照明2”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_two（）”，5000）；
}
功能lightning_three（）{
$（“#容器#照明3”）.fadeIn（“快速”）.fadeOut（“快速”）；
setTimeout（“lightning_three（）”，7000）；
}
});
div.holder>div{
显示：内联块；
边框：1px纯黑；
利润率：10px；
填充物：5px；
浮动：左；
}

单击其中一个：

头
眼睛
鼻子
嘴
我认为您可以改进此代码，因为这个想法是正确的