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>

结合js脚本函数

3 个答案: