jquery가있는 하이라이트 영역 요소

Question

저는 초보자입니다.

여기 내 자바 스크립트입니다 : '데모'지도 내에서 코드는 모든 area 요소를 배열 elementPositions에 푸시합니다. 사용자가 영역 요소 위로 마우스를 가져 가면 hoveredElements 배열로 푸시됩니다. 그런 다음 hoveredElements의 각 영역 요소에 대해 오버레이 ID 태그가 표시되며 영역 요소 (사각형)도 표시되도록합니다. 나는 '$ (이) .show()하지만이 작동하지 않았다 ... 여기

전형적인 영역 요소 인 시도 :

<map name="demo" id="demo"> 
<area shape="rect" coords="400,400,500,499" href="#" id="r6067" alt="r6067"> 
</map> 
<div class= "cont" style="display:none" id="overlayr6067"> mdtBIL1C09 </div> 

내가 아래에있는 내 자바 스크립트의 니콜라이의 리팩토링을 수락, 여기에 내 코드가 jsfiddle에서 진행 중임 : https://jsfiddle.net/sfs1926/wacd5bv5/1/

Answer 1

hoveredElements[ih].element.show()으로 처리 할 수 ​​있습니다.

또는 item.element.show(); 아래에서 약간 리팩토링 한 코드를 따르는 경우.

if ($('#demo').length >0) { 

    var elementPositions = []; // didn't find it declared in your code 

    $('#demo area').each(function() { 

     var offset = this.coords, 
      coordarray = offset.split(","), 
      left = coordarray[0], 
      top = coordarray[1], 
      right = coordarray[2], 
      bottom = coordarray[3], 
      id = this.id, 
      hoveredElements = []; 

     elementPositions.push({ 
      element: $(this), 
      top: top, 
      bottom: bottom, 
      left: left, 
      right: right, 
      id: id, 
     }); 



     $("body").mousemove(function(e) { 

      /* 
      for (var ih = 0; ih < hoveredElements.length; ih++) { //for loop over all hovered elements 

       var id = hoveredElements[ih].id; 
       $('#overlay' + id).hide(); 
      } 
      */ 

      hoveredElements.forEach(function(item) { 
       item.overlay.hide(); 
      }); 

      hoveredElements = []; 

      var xPosition = e.pageX; 
      var yPosition = e.pageY; 

      for (var ie = 0; ie < elementPositions.length; ie++) { 
       var test = elementPositions[ie].id; 
       if (xPosition >= elementPositions[ie].left && 
        xPosition <= elementPositions[ie].right && 
        yPosition >= elementPositions[ie].top && 
        yPosition <= elementPositions[ie].bottom) { 
        // The mouse is within the element's boundaries 

        hoveredElements.push({ 
         element: elementPositions[ie].element, 
         overlay: $('#overlay' + test), // store overlay too 
         id: test 
        }); 
       } 
      } //end of for loop over all elements 

      /* 
      for (var ih = 0; ih < hoveredElements.length; ih++) { //for loop over all hovered elements 
       var id = hoveredElements[ih].id; 
       $('#overlay' + id).show(); 
       $(this).show(); // ??? 
      } 
      */ 

      hoveredElements.forEach(function(item) { 
       item.overlay.show(); 
       item.element.show(); 
      }); 

     }); 
    }); 

}