Javascript: Applying class to multiple Id's For Interactive Map

Question

I'm new to Javascript and have had some help, but still trying to wrap my head around the solution. I'm trying to apply the .mapplic-active class to all states listed on the map when active. An example can be seen here: http://test.guidehunts.com/concealed-weapons-permit-reciprocity-map/?location=nv. I'm trying to get a string from location.description, split the states, then apply the class through the results of an array, but running into issues. This is what I'm trying to edit.

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

I would recommend using jQuery plugin and trying this

<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>

1. Since the description has other text and tags, lets strip the html tags out and split it using :. We would then take the second portion being the states only.
2. The second split command will split the states into an array.
3. The each command will loop through the locations
4. The addClass will then apply the class to just the states that were past back from the description.
5. Don't forget to reset the actives by doing something like this

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