Mixing javascript with jquery -

on click assign class element (svg path) using pure javascript:

this.getelement().classlist.add('active'); 

the new class part of series of other classes has. once new class added clicked element, should give class .active other elements in html have matching classes clicked element itself.

html:

<button class="1600 1500"></button> <button class="1600 1300 1200"></button> <button class="1300 1200 1700 1800"></button>     <button class="1300 1200 1100 1900"></button>  <div class="1600 1700 item leaflet"></div> 

i don't know button has matching class since classes dynamic too. know div have class matching button's class.

the thing specific reasons using pure javascript assign new class name on click on div (works):

this.getelement().classlist.add('active'); 

so following won't work:

this.click(function() {   var classes = this.attr('class').split(' ')   classes.foreach(function(elem) {     $('.' + elem).addclass('active');   }); }); 

this how call click:

function oneachfeature(feature, layer) {     layer.on({         click: panelshow     }); }  function panelshow(e) {     // works, class added clicked element     this.getelement().classlist.add('active'); } 

but have buttons outside , needs have class active per question.

desired after div click

<div class="1600 1700 item leaflet active"></div>  <button class="1600 1500 active"></button> <button class="1600 1300 1200 active"></button> <button class="1300 1200 1700 1800 active"></button> <button class="1300 1200 1100 1900"></button> 

this how deal opposite, clicking on buttons (and works):

var date; $("button").on("click", function(b) {      date = $(this).attr("data-date");      $('path').attr('class', function(index, classnames) {         return classnames.replace('active', '');     });     $("svg ." + date).attr('class', function(index, classnames) {         return classnames + ' active';     });      $(".btn").removeclass("active");     $(this).addclass("active");  }); 

note

in real life on buttons using data attribute consider class example question on here, it's paste more complex code have.

also using leafletsjs, that's why javascript click in function above.

one option is:

var buttons = [].slice.call(document.queryselectorall('.buttons button'));  function panelshow(e) {   $("path").removeclass("active");   var clickedpath = this.getelement();   clickedpath.classlist.add("active");   var datum = (clickedpath.getattribute('class').match(/\d+/g) || [])[0];   buttons.foreach(function(btn) {     var method = btn.getattribute('data-date') === datum ? 'add' : 'remove';     btn.classlist[method]('active');   }); }