Javascript: Applying class to multiple Id's For Interactive Map -
i'm new javascript , have had help, still trying wrap head around solution. i'm trying apply .mapplic-active class states listed on map when active. example can seen here: http://test.guidehunts.com/concealed-weapons-permit-reciprocity-map/?location=nv. i'm trying string location.description, split states, apply class through results of array, running issues. i'm trying 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 visible this.el.stop().show(); } }
i recommend using jquery plugin , 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 states (after text) locations=locations[1]; //make states lowercase match id's locations = locations.tolowercase(); //remove carriage returns locations = locations.replace('\n',""); //locations var jquery array locations = locations.split(','); //loop array , add class $.each( locations, function( key, state ) { $("#"+state).attr("class", "mapplic-active"); //$("#"+state).addclass('mapplic-active'); }); </script>
- since description has other text , tags, lets strip html tags out , split using :. take second portion being states only.
- the second split command split states array.
- the each command loop through locations
- the addclass apply class states past description.
- don't forget reset actives doing this
$(".mapplic-active").removeclass('mapplic-active');
Comments
Post a Comment