[英]Iterate over area elements with $.each() or for loop
Is there a way to avoid repeating code when iterating over area elements with Jquery? 有没有一种方法可以避免在使用Jquery迭代区域元素时重复代码? or an easier way with plain javascript?
还是使用简单的javascript的简单方法? A snippet of the HTML:
HTML的摘要:
<img id="img1" src="image.png" width="400px" height="400px" usemap="#area_click"title="click to shade different areas" />
<map name="area_click">
<area href="" shape="poly" coords="33,149,53,151,49,183,45,205,27,197,29,171" alt="area1" >
<area href="" shape="poly" coords="157,148,161,168,161,201,143,204,139,180,137,152" alt="area2" >
<area href="" shape="poly" coords="51,144,55,126,57,114,41,88,32,112,32,140" alt="area3" >//...35 more areas follow...
</map>
I have tried... 我努力了...
Create array from map children. 从地图子级创建数组。
var kids=$("map[name*='area_click']").children();
Loop through the array. 遍历数组。
for (var k=0;k<kids.length;k++){ kids[k].click(function(event){ event.preventDefault(); $("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}
I thought I was missing something about the array-like object created by children(). 我以为我缺少有关children()创建的类似数组的对象的信息。 So I tried...
所以我尝试了...
1.Create array from map children. 1.从地图孩子创建数组。 Then use eq() to grab references to the DOM elements in the array.
然后使用eq()获取对数组中DOM元素的引用。
var kids=$("map[name*='area_click']").children();
var kidsArray = kids.eq();
2.Loop through the array. 2.遍历数组。
for (var k=0;k<kidsArray.length;k++){
kidsArray[k].click(function(event){
event.preventDefault();
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);});}
Also tried using $.each and find() instead of children(). 还尝试使用$ .each和find()代替children()。 But it seems $.each() cannot digest area elements.
但是似乎$ .each()无法消化面积元素。 The following generates a type error in the jquery.min script in the Firebug console.
以下内容在Firebug控制台的jquery.min脚本中生成类型错误。
TypeError: t is undefined ...nction(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"... TypeError:t未定义... nction(e){var t,n =“”,r = 0,i = e.nodeType; if(i){if(1 === i || 9 === i || 11 ===我){如果( “串” ......
var kids=$("map[name*='area_click']").find("area");
var k=0;
$.each(kids.eq(k)).click(function(event){
event.preventDefault();
$("#" + areaArray[k]).fadeToggle(500).fadeTo(300,opacityArray[k]);
k++;
});
I'm sure I am doing something wrong in trying to pass a reference to the array to the for loop or $.each(), I just don't know what. 我肯定在尝试将对数组的引用传递给for循环或$ .each()时做错了,我只是不知道什么。 Any help?
有什么帮助吗? Or am I going about the whole thing backwards?
还是我要把整个事情倒退?
Looks like a problem with the closure variable k
, try 闭包变量
k
似乎有问题,请尝试
kids.each(function (k) {
$(this).click(function (event) {
event.preventDefault();
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
});
})
Or 要么
kids.click(function (event) {
event.preventDefault();
var k = kids.index(this)
$("#" + AreaArray[k]).fadeToggle(500).fadeTo(300, opacityArray[k]);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.