結合js腳本功能

Question

我該如何結合這個來減少重複。什麼是最好的方式，所以我沒有重複的點擊功能，並且即使參數不同，您是否還有任何建議來組合閃電功能？由於

$(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); 
} 

Answer 1

類似的東西

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

Answer 2

這是我腦子裏想的：

$(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); 
} 

Answer 3

你可以試試這個：

$(document).ready(function() { 
 
    var clickCounter = []; 
 
    var types = ['head', 'eyes', 'nose', 'mouth']; 
 

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

 
    types.forEach(function(type) { 
 
    clickCounter[type] = 0; 
 
    $("#" + type).click(function() { 
 
     processClick(this, type); 
 
    }); 
 
    }); 
 

 
    function processClick(element, type) { 
 
    if (element) { 
 
     if (clickCounter[type] < 9) { 
 
     $(element).animate({left: "-=367px"}, 500); 
 
     clickCounter[type] += 1; 
 
     } else { 
 
     $(element).animate({left: "0px"}, 500); 
 
     clickCounter[type] = 0; 
 
     } 
 

 
     console.log(type + ': ' + clickCounter[type]); 
 
    } 
 
    } 
 

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

div.holder > div{ 
 
    display:inline-block; 
 
    border: 1px solid black; 
 
    margin:10px; 
 
    padding:5px; 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Click on one of these: </p> 
 
<div class='holder'> 
 
    <div id="head">Head</div> 
 
    <div id="eyes">Eyes</div> 
 
    <div id="nose">Nose</div> 
 
    <div id="mouth">Mouth</div> 
 
</div>