2016-08-15 81 views
0

我是一名JavaScript初学者。jquery高亮显示区域元素

这里是我的javascript:在地图'demo'中,代码将所有区域元素推入数组elementPositions中。当用户将鼠标移到某个区域元素上时,它将被推入数组histedElements中。然后,对于hoveredElements中的每个区域元素,将显示叠加标识标记,并且我也希望显示区域元素(矩形)。我试着“$(本).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/

+0

谢谢编辑,palash!也许你对我有如何继续的建议? – FSS

+0

什么是“实际矩形”?它是区域元素吗? –

+0

是的,所有区域元素都是矩形。 – FSS

回答

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(); 
      }); 

     }); 
    }); 

} 
+0

谢谢尼古拉!我按照你的建议进行了重构,覆盖层显示正常。但是这个元素仍然没有显示出来。我应该期望看到它是否显示? – FSS

+0

当你把它推到'hoveredElements'而不是'element:$(this)'时,你确定你有'element:elementPositions [ie] .element'吗? –

+0

我已经这样做了。我想知道你最后两个括号,不应该是}),然后}?我也想知道是否你的意思是“$('#demo area')。每个(function()”在mousemove函数完成后关闭...... – FSS