2010-06-15 3 views
3

이미지 맵 내부의 일부 영역을 처리하기 위해 JQuery 스크립트를 구현하려고합니다. $ ('area [shape = "poly"]') 선택기로 관심있는 영역을 가져옵니다. IE8 및 Firefox에서는 제대로 작동하지만 IE6 또는 IE에서 요소를 선택하지 않습니다. IE7.
이것은이 문제를 보여주는 테스트 페이지입니다. 이 JQuery 버그 또는 내가 뭔가 잘못하고 있는지 모르겠습니다. jquery 속성 선택기 및 IE6-7에서 오류가 발생했습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
var areas = $('area[shape="poly"]'); 
alert('areas: ' + areas.length); 
}); 
//]]> 
</script> 
<title>Test</title> 
</head> 
<body> 
<img id="img1" src="nothing.gif" style="width:300px; height:300px; border: 2px solid black" usemap="#map1"/> 
<map id="map1"> 
<area shape="rect" title="rectArea" coords="126,112,231,217" alt=""/> 
<area shape="poly" title="polyArea1" coords="274,72,262,70,251,68,240,67,228,66,217,67,206,68,194,70,183,72,181,63,192,60,204,58,216,57,228,56,240,57,252,58,264,60,276,63" alt=""/> 
<area shape="poly" title="polyArea2" coords="241,194,235,193,228,193,222,193,216,194,196,119,204,117,212,116,220,115,228,115,237,115,245,116,253,117,261,119" alt=""/> 
</map> 
</body> 
</html> 

가 IE6-7
덕분에 IE8과 파이어 폭스 2와 0을 보여주고, 기예르모

+0

문제를 해결하려면'$ ('area')'를 선택하고 선택한 것을 덤프하면 무엇을 얻게됩니까? –

답변

7
당신이 값을 대문자 경우 작업 표시

: 나는 '

var areas = $('area[shape="POLY"]'); 
+0

+1 틀리지 않아 - 여기에서도 효과가 있습니다. – Skilldrick

+0

그것은 부끄러운 일입니다. jQuery는 그 사실을 추상화하지 않습니다. 나는 그것을 버그라고 부릅니다. – Skilldrick

+0

예, 그 트릭을했습니다. 감사합니다. –

2

을 IE6과 동일한 문제가 있습니다. 내가 제대로 선택이 코드가 $ ("영역 [모양 = 폴리]")

:

0

이 시도

[title*="poly"] 

(*= 수단 포함) : 당신은 속임수하고 선택기를 변경할 수 있습니다 IE6에서

<script> 
     $(document).ready(function() { 
     $("#button").click(function(){ 
      $("div[shape=poly]").remove(); 
     }); 
     });   
    </script> 

<button id="button">Button</button> 
<div shape="poly">p</div> 
<div shape="poly">p</div> 
<div shape="s">s</div> 
<div shape="poly">p</div> 
<div shape="poly">p</div>