扫码关注官方订阅号
我想在点击一个p后显示边框并且能够改变它的svg子元素中的元素
for(var j=0;j
但问题是当我打开文件第一次点击某个图像时。是可以通过range调整嘴巴的角度,但当我选择另外一个图像时,调整range,两个图像的嘴巴角度都会变化!!请问这是为什么?绑定事件为什么会重复?新手求助~谢谢
闭关修行中......
你为同一个元素(mouseSetting)绑定了 n 个 "change" 事件,其实质是为这个元素的 change 事件添加了 n 个处理函数,当这个元素发生改变时,会遍历所有 change 处理函数,依次调用。所以就出现了你看到的现象。
"change"
你只需要绑定一个 change 事件处理函数,然后在这个函数里,获取当前人物的嘴巴来改变状态。而当前人物则是由 click 事件设置的,代码大概如下
var current; for (var j = 0; j < pList.length; j++) { (function(el) { pList[el].onclick = function() { current = pArray[el]; // gg = pArray[el];//gg为选中的元素的svgdocument // init(gg);//将选中的元素传入函数进行修改 }; })(j); } function init(/*elem*/) { var mouthSetting = document.getElementById("mouthSet"); //mouthsetting为range滚动条的ID // var svgMouth = elem.getElementById("mouth"); //获取svg的某个子元素 mouthSetting.addEventListener("change", test, false); //为range绑定事件 function test() { if (!current) { return; } var svgMouse = current.getElementById("mouth"); svgMouth.setAttribute("d", "M 40 115 Q 60 " + this.value * 150 + " 75 115"); } } init();
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
你为同一个元素(mouseSetting)绑定了 n 个
"change"事件,其实质是为这个元素的 change 事件添加了 n 个处理函数,当这个元素发生改变时,会遍历所有 change 处理函数,依次调用。所以就出现了你看到的现象。你只需要绑定一个 change 事件处理函数,然后在这个函数里,获取当前人物的嘴巴来改变状态。而当前人物则是由 click 事件设置的,代码大概如下