Question

我是Javascript的新手并且得到了一些帮助，但仍然试图绕过解决方案。我正在尝试将.mapplic-active类应用于活动时在地图上列出的所有状态。这里可以看到一个例子：http://test.guidehunts.com/concealed-weapons-permit-reciprocity-map/?location=nv。我试图从location.description获取一个字符串，拆分状态，然后通过数组的结果应用该类，但遇到问题。这就是我尝试编辑的内容。

function Tooltip() {
        this.el = null;
        this.shift = 6;
        this.drop = 0;
        this.location = null;

        this.init = function() {
            var s = this;

            // Construct
            this.el = $('<div></div>').addClass('mapplic-tooltip');
            this.close = $('<a></a>').addClass('mapplic-tooltip-close').attr('href', '#').appendTo(this.el);
            this.close.on('click touchend', function(e) {
                e.preventDefault();
                $('.mapplic-active', self.el).attr('class', 'mapplic-clickable');
                if (self.deeplinking) self.deeplinking.clear();
                if (!self.o.zoom) zoomTo(0.5, 0.5, 1, 600, 'easeInOutCubic');
                s.hide();
            });
            this.image = $('<img>').addClass('mapplic-tooltip-image').hide().appendTo(this.el);
            this.title = $('<h4></h4>').addClass('mapplic-tooltip-title').appendTo(this.el);
            this.content = $('<div></div>').addClass('mapplic-tooltip-content').appendTo(this.el);
            this.desc = $('<div></div>').addClass('mapplic-tooltip-description').appendTo(this.content);
            this.link = $('<a>' + mapplic_localization.more_button + '</a>').addClass('mapplic-tooltip-link').attr('href', '#').hide().appendTo(this.el);
            this.triangle = $('<div></div>').addClass('mapplic-tooltip-triangle').prependTo(this.el);

            // Append
            self.map.append(this.el);
        }

        this.set = function(location) {
            if (location) {
                var s = this;

                if (location.image) this.image.attr('src', location.image).show();
                else this.image.hide();

                if (location.link) this.link.attr('href', location.link).show();
                else this.link.hide();

                this.title.text(location.title);
                this.desc.html(location.description);
                this.content[0].scrollTop = 0;

                this.position(location);
            }
        }

        this.show = function(location) {
            if (location) {
                if (location.action == 'none') {
                    this.el.stop().fadeOut(300);
                    return;
                }

                var s = this;

                this.location = location;
                if (self.hovertip) self.hovertip.hide();

                if (location.image) this.image.attr('src', location.image).show();
                else this.image.hide();

                if (location.link) this.link.attr('href', location.link).show();
                else this.link.hide();

                this.title.text(location.title);
                this.desc.html(location.description);

                // Shift
                var pinselect = $('.mapplic-pin[data-location="' + location.id + '"]');
                if (pinselect.length == 0) {
                    this.shift = 20;
                }
                else this.shift = pinselect.height() + 10;

                // Loading & positioning
                $('img', this.el).load(function() {
                    s.position();
                });
                this.position();

                // Making it visible
                this.el.stop().show();
            }
        }

Answer 1

我建议使用jQuery插件并尝试使用

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script>
    var locations=location.description;

    //strip tags
    locations = locations.replace(/(<([^>]+)>)/ig,"");

    //take states after :
    locations = locations.split(':');

    //set locations to states (after the text)
    locations=locations[1];

    //make states lowercase to match id's
    locations = locations.toLowerCase();

    //remove carriage returns
    locations = locations.replace('\n',"");

    //locations var jquery array
    locations = locations.split(',');

    //loop array and add class
    $.each( locations, function( key, state ) {
        $("#"+state).attr("class", "mapplic-active");
        //$("#"+state).addClass('mapplic-active');
    });
</script>

由于描述中包含其他文本和标签，因此我们将html标签剥离并使用以下方式拆分：然后我们将第二部分仅作为州。
第二个拆分命令会将状态拆分为数组。
每个命令将遍历位置
然后，addClass将该类仅应用于从描述中返回的状态。
不要忘记通过这样的事情来重置活动

$(".mapplic-active").removeClass('mapplic-active');

Javascript：将类应用于多个Id用于交互式地图

1 个答案: