1

我正在使用 jQuery UI 位置实用程序在图像地图上放置标记。我在地图中的每个区域标记上使用 html5 数据属性，然后，当用户单击包含与其中一个区域相同的数据属性的链接时，它会生成标记的 html。这工作正常。

但是，一个链接可以对应不同的区域标签。因此，我创建了一个 DOM 元素数组并将它们附加到页面上的 div 中。然后，当我尝试在每个标记上使用位置实用程序时，数组中的所有标记最终都位于相同的位置，而不是与其数据属性匹配的区域标记上。我猜这与附加数组而不是原始 DOM 对象有关吗？

下面是我的代码：

var $holder = $('#holder'); //div that holds the generated markers
    var $map = $('#floorPlan');
    var $area = $('#floorPlan area');
    $('.locationLink li a').each(function () {
        $(this).click(function () {
            //remove pinned markers
            $holder.children('.pinned').fadeOut(function () {
                $(this).remove();
            });

            var grp = $(this).attr('data-group'),
                $grpMatch = new Array();

            //generate new markers and match to area
            $map.find('area[data-group="' + grp + '"]').each(function () {
                var loc = $(this).attr('data-loc')
                // create a marker for each matched area and create array
                if ($(this).hasClass('hall')) {
                    var eleItems = '<div data-loc="' + loc + '" data-group="' + grp + '" class="marker marker-blue"></div>';
                }
                else {
                    var eleItems = '<div data-loc="' + loc + '" data-group="' + grp + '" class="marker"></div>';
                }

                $grpMatch.push(eleItems);
                 $holder.append($grpMatch);
                positionMarker();

            });

            return false;
        });

    });


    function positionMarker() {


        $holder.children('.marker').each(function() {
            var $lMarker = $(this);
            var mLoc = $lMarker.attr('data-loc');
            var $aMatch = $map.find('area[data-loc="' + mLoc + '"]');

            $lMarker.position({
                'my': 'center center',
                'at': 'center center',
                'of': $aMatch,
                'collision': 'none'
            }).addClass('pinned');

        });
    }

谢谢您的帮助

4

0 回答 0