JS - 각 인스턴트에 JS를 쓰지 않고도 테이블 요소에서 마주 치게 될 때지도에 표시 할 모양이 필요합니다.

텍스트를 가져갈 수 있고 모양이 이미지 맵에 표시되는 온라인 스크립트를 발견했습니다. 그것은 작동하지만 그 순간에 한해서만 작동합니다. 개별 인스턴스를 제공하는 JS를 사용할 수 있습니까? 그래서 각 insant를 참조하는 개별 JS를 작성할 필요가 없습니까? 내 텍스트가 테이블에 정렬됩니다. 여기 JS - 각 인스턴트에 JS를 쓰지 않고도 테이블 요소에서 마주 치게 될 때지도에 표시 할 모양이 필요합니다.

내 JS : 당신은 내가 강조하는 두 번째 항목을 가지고 위의 볼 수

<HEAD>..... 
<script type="text/javascript">$(function() { 
    $('.map').maphilight(); 
    $('#squidheadlink').mouseover(function(e) { 
     $('#squidhead').mouseover(); 
    }).mouseout(function(e) { 
     $('#squidhead').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 
}); 
</script> 


<BODY>...... 
<map..... 
<area id="squidhead" href="#" shape="rect" coords="680,55,730,110" alt="Octoface"  data maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}'> 
<area id="xxx" href="#" shape="circle" coords="298,552,10" alt="Octoface" data-maphilight='{"stroke":false,"fillColor":"ff0000","fillOpacity":0.6}'> 
</map> 
</div> 
<DIV ID="header" STYLE="position:absolute; top:450px; left:20px; width:1490px; height:225px;"> 
<table class="tftable" border="0"> 
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th><th>Header 6</th><th>Header 7</th><th>Header 8</th><th>Header 9</th><th>Header 10</th></tr> 
<tr> 
<td><a id="squidheadlink" href="#">gyrex</a></td> 
<td><a id="xxxlink" href="#">xxx</a></td>

되는 "squidhead"섹션의 중복입니다 "영역 ID가"참조 다음 코드에서 그것에 다른 이름을 갖는의 조정과 :가에 사용되는 테이블에있는 항목의 전체 배열에 대해 한 번만 사용할 수 있도록

<script type="text/javascript"> 
$(function() { 
    $('.map').maphilight(); 
    $('#xxxlink').mouseover(function(e) { 
     $('#xxx').mouseover(); 
    }).mouseout(function(e) { 
     $('#xxx').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 
});</script>

내 질문입니다, 자바 스크립트를 조작하는 방법은 무엇입니까 지도/이미지의 다른 영역을 강조 표시 하시겠습니까? 나는 많은 것 모든 순간,에 대한 개별 JS를 작성하도록 강요하고 있도록

은 "ID"항목

해결 된 스크립트, 감사 @levi하는 ... 그들의 적절한 JS 스크립트를 참조 :

코드를 다시 작성한 후 위의 신사가 작업을 시작했습니다. 최종 스크립트 :
$ (function() { $ ('.지도') .maphilight(); $ ('.tftable td a') 각 (function() { var areaId = '#'+ this.id.replace ('link', '); $ (this) .mouseover (function (e) { $ (areaId) .mouseover(); }). mouseout (function (e) { $ (areaId) .mouseout(); }). (function (e) { e.preventDefault(); })를 클릭하십시오. }}); }});

여러 인스턴스에 코드를 적용하기 위해 루프를 사용할 수 있습니다

출처

2014-01-27 user3241848

<스크립트 유형 = "텍스트/자바 스크립트"SRC = "jquery.min.js"> <스크립트 유형 = "텍스트/자바 스크립트 "SRC ="jquery.maphilight.js "> \t <스크립트 유형 ="텍스트/자바 스크립트 "> \t $ (함수() { $() maphilight() '에 매핑합니다.';. $ (.tftable td a '). 각 (function() { var areaId ='# '+ this.id.replace ('link ',' '); $ (this) .mouseover (function (e) { $ (areaId) .mouseover(); }). mouseout (function (e) { $ (areaId) .mouseout(); }). (function (e) { e.preventDefault(); })를 클릭하십시오. }}); }}); \t – user3241848

$('.tftable td a').each(function() { 
    var areaId = '#' + this.id.replace('link', ''); 
    $(this).mouseover(function (e) { 
     $(areaId).mouseover(); 
    }).mouseout(function (e) { 
     $(areaId).mouseout(); 
    }).click(function (e) { 
     e.preventDefault(); 
    }); 
});

출처

2014-01-27 20:17:37 levi

슈퍼 빠른 답변 주셔서 감사합니다. 드로잉 보드로 돌아가 세부 사항을 정리하십시오 ... – user3241848

글쎄, 더 많은 연구 끝에, 나는 길을 잃었습니다. 답변이 원본 JS 또는 독립 실행 형 JS에 대한 부속 장치인지 여부를 모릅니다. 더 이상의 도움은 크게 감사드립니다 ... – user3241848

그것의 간단한. 이 코드는'$ ('. map') .maphilight();'아래의 모든 코드를 대체합니다. 각 요소에 대한 mouseover 이벤트를 별도로 정의하는 대신 테이블 내의 모든 링크를 수집하고 각 링크에 대해 관련 mousover 이벤트를 바인딩합니다. – levi

JS - 각 인스턴트에 JS를 쓰지 않고도 테이블 요소에서 마주 치게 될 때지도에 표시 할 모양이 필요합니다.

답변

관련 문제