Javascript：将类应用于多个Id'；互动地图_Javascript

Javascript：将类应用于多个Id'；互动地图

javascript

Javascript：将类应用于多个Id'；互动地图,javascript,Javascript,我对Javascript还不熟悉，并得到了一些帮助，但我仍在尝试解决方案。我正在尝试将.mapplic活动类应用于活动时地图上列出的所有状态。此处可以看到一个示例：。我试图从location.description获取一个字符串，拆分状态，然后通过数组的结果应用该类，但遇到了问题。这就是我要编辑的内容 function Tooltip() { this.el = null; this.shift = 6; this.drop = 0;

我对Javascript还不熟悉，并得到了一些帮助，但我仍在尝试解决方案。我正在尝试将.mapplic活动类应用于活动时地图上列出的所有状态。此处可以看到一个示例：。我试图从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();
            }
        }

函数工具提示（）{
this.el=null；
这1.shift=6；
这个0.drop=0；
this.location=null；
this.init=函数（）{
var s=此；
//构造
this.el=$（''）.addClass（'mapplic-tooltip'）；
this.close=$（''）.addClass（'mapplic-tooltip-link'）.attr（'href'，'#'）.hide（）.appendTo（this.el）；
this.triangle=$（''）.addClass（'mapplic-tooltip-triangle'）.prependTo（this.el）；
//附加
self.map.append（this.el）；
}
this.set=函数（位置）{
如果（位置）{
var s=此；
if（location.image）this.image.attr（'src'，location.image）.show（）；
否则这个.image.hide（）；
if（location.link）this.link.attr（'href'，location.link）.show（）；
否则这个.link.hide（）；
此.title.text（location.title）；
this.desc.html（location.description）；
this.content[0]。scrollTop=0；
这个位置（位置）；
}
}
this.show=功能（位置）{
如果（位置）{
如果（location.action='none'）{
此.el.stop（）.fadeOut（300）；
返回；
}
var s=此；
这个位置=位置；
if（self.hovertip）self.hovertip.hide（）；
if（location.image）this.image.attr（'src'，location.image）.show（）；
否则这个.image.hide（）；
if（location.link）this.link.attr（'href'，location.link）.show（）；
否则这个.link.hide（）；
此.title.text（location.title）；
this.desc.html（location.description）；
//移位
var pinselect=$（'.mapplic pin[data location=“'+location.id+'”）；
如果（pinselect.length==0）{
这个.移位=20；
}
否则this.shift=pinselect.height（）+10；
//装载和定位
$（'img'，this.el）.load（函数（）{
s、 位置（）；
});
这个位置（）；
//使其可见
这个.el.stop（）.show（）；
}
}

我建议使用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>


变量位置=位置。描述；
//条状标签
位置=位置。替换（/（]+）>）/ig，“”；
//在下列情况之后采取行动：
位置=位置。拆分（“：”）；
//将位置设置为状态（在文本之后）
地点=地点[1]；
//使状态小写以匹配id
locations=locations.toLowerCase（）；
//删除回车
位置=位置。替换（'\n'，“”）；
//位置变量jquery数组
位置=位置。拆分（'，'）；
//循环数组并添加类
$。每个（位置、功能（键、状态）{
$（“#”+状态）.attr（“类”，“mapplic活动”）；
//$（“#”+状态）.addClass（'mapplic-active'）；
});

因为描述中有其他文本和标记，所以让我们去掉html标记并使用：。将其拆分，然后我们将第二部分仅作为状态

第二个split命令将状态拆分为一个数组

每个命令将在各个位置循环执行

addClass然后将该类仅应用于从描述返回的状态

不要忘记通过这样做来重置活动

$（“.mapplic-active”）.removeClass（'mapplic-active'）；