![](/img/trans.png)
[英]Javascript - Bind a click event to multiple <options> elements
[英]Jquery - How to make bind click event for multiple elements?
我正在使用 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>
谢谢你。
您可以创建一个人脸对象来保存每个人脸部分的点击次数,以及一个处理点击事件的函数(下面命名为 clickHandler)。 clickHandler 接受一个id
并在具有该id
的元素上调用适当的 animate 函数。
检查以下:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.