Выделить элемент области с помощью jquery

Question

Я начинающий в javascript.

вот мой javascript: внутри карты 'demo' код подталкивает все элементы области в массив 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> 

Я принял рефакторинга Николая моего JavaScript ниже, здесь мой код в стадии разработки в 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(); 
      }); 

     }); 
    }); 

}