Jquery - 如何为多个元素绑定单击事件？

Question

我使用 jquery 为图像制作动画，以制作混合图像，单击时滚动不同部分。

我想过这样做

$("#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;

        }

    });

我希望有更好的方法

我想我可以为班级和每个班级做一些事情，但不知道如何让它发挥作用。需要将其设为点击事件并跟踪每个图像部分

$(".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>

此链接中的图像将使您了解该功能

Answer 1

您可以创建一个面部对象来保存每个面部部件的点击计数，还可以创建一个处理点击事件的函数（下面名为 clickHandler）。clickHandler 接受id并在具有该 的元素上调用适当的动画函数id。检查如下：var face = {&nbsp; "headClicks" : 0,&nbsp; "eyesClicks" : 0,&nbsp; "noseClicks" : 0,&nbsp; "mouthClicks" : 0,&nbsp; "clickHandler" : function(id) {&nbsp; &nbsp; if(this[id+"Clicks"] < 9) {&nbsp; &nbsp; &nbsp; animateLeft367(id);&nbsp; &nbsp; &nbsp; this[id+"Clicks"]++;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; animateLeft0(id);&nbsp; &nbsp; &nbsp; this[id+"Clicks"] = 0;&nbsp; &nbsp; }&nbsp; }}function animateLeft367(id) {&nbsp; $("#" + id).animate({left: "-=367px"}, 500);&nbsp; console.log('animated ' + id + ' 367');}function animateLeft0(id) {&nbsp; $("#" + id).animate({left: "0px"}, 500);&nbsp; console.log('animated ' + id + ' 0');}$(".face").click(function() {&nbsp; face.clickHandler(this.id);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="pic_box">&nbsp; &nbsp; <div id="head" class="face"><img src="images/headsstrip.jpg"></div>&nbsp; &nbsp; <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div>&nbsp; &nbsp; <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div>&nbsp; &nbsp; <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div></div>