jquery高亮显示区域元素
问题描述:
我是一名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/
答
您可以使用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();
});
});
});
}
谢谢编辑,palash!也许你对我有如何继续的建议? – FSS
什么是“实际矩形”?它是区域元素吗? –
是的,所有区域元素都是矩形。 – FSS