javascript - 使用 jquery 突出显示区域元素

Question

我是 JavaScript 初学者。

这是我的 javascript:在 map “演示”中，代码​​将所有区域元素插入数组 elementPositions 中。当用户将鼠标悬停在区域元素上时，它将被插入数组hoveredElements中。然后，对于hoveredElements 中的每个区域元素，都会显示覆盖id 标记，并且我希望也显示区域元素(一个矩形)。我尝试了 '$(this).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>

我已经接受了 Nikolay 对下面我的 javascript 的重构，这是我在 jsfiddle 中正在进行的代码:https://jsfiddle.net/sfs1926/wacd5bv5/1/

Answer 1

您可以使用悬停的 Elements[in].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();
            });

        });
    });

}