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> 
  1. since description has other text , tags, lets strip html tags out , split using :. take second portion being states only.
  2. the second split command split states array.
  3. the each command loop through locations
  4. the addclass apply class states past description.
  5. don't forget reset actives doing this

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


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -