1

jQuery UI 位置ユーティリティを使用して、イメージ マップにマーカーを配置しています。マップ内の各エリア タグで html5 データ属性を使用しており、ユーザーがエリアの 1 つと同じデータ属性を含むリンクをクリックすると、マーカーの 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