Jquery - 如何为多个元素制作绑定点击事件？

Question

Iam using jquery to animate an image to make a mixed up image that scrolls different parts when clicked.

I thought of doing like this

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

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

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

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

I hope there is better way of doing it

I'm thinking I can do something with the class and each but not sure how to quite make it work. need to make it a click event and keep track of each image part

$(".face").each(function (i) {
        if (i < 9) {
            $(".face").parent().animate({
                left: "-=367px"
            }, 500);
            i++;
        } else {
            $(".face").parent().animate({
                left: "0px"
            }, 500);
            i = 0;
        }
    });

HTML:

<div id="pic_box">
                <div id="head" class="face"><img src="images/headsstrip.jpg"></div>
                <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>
                <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>
                <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div>
  </div>

image in this link will give you an idea of the functionality

Thank you.

Answer 1

You can create a face object that holds the click counts of each face part and also a function to handle the click event (named clickHandler below). The clickHandler takes in an id and calls the appropriate animate function on the element that has that id .

Check below:

 var face = { "headClicks" : 0, "eyesClicks" : 0, "noseClicks" : 0, "mouthClicks" : 0, "clickHandler" : function(id) { if(this[id+"Clicks"] < 9) { animateLeft367(id); this[id+"Clicks"]++; } else { animateLeft0(id); this[id+"Clicks"] = 0; } } } function animateLeft367(id) { $("#" + id).animate({left: "-=367px"}, 500); console.log('animated ' + id + ' 367'); } function animateLeft0(id) { $("#" + id).animate({left: "0px"}, 500); console.log('animated ' + id + ' 0'); } $(".face").click(function() { face.clickHandler(this.id); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pic_box"> <div id="head" class="face"><img src="images/headsstrip.jpg"></div> <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div> <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div> <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div> </div>