Смешивание Javascript с JQuery

Question

На мыши я присвоить класс мой элемент (SVG PATH) с использованием чистого JavaScript:

this.getElement().classList.add('active'); 

Новый класс является частью целого ряда других классов, оно уже есть. Однако, как только этот новый класс добавляется к элементу с кликом, он также должен дать классу .active другим элементам в html, которые имеют любые соответствующие классы с самим щелчком.

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> 

Я не знаю, какая кнопка имеет класс соответствия, так как эти классы динамичны тоже. Все, что я знаю, это то, что у div будет любой класс, соответствующий классу любой кнопки.

Дело в том, что по определенным причинам я использую чистый JavaScript, чтобы присвоить новое имя класса по клику на DIV (работы):

this.getElement().classList.add('active'); 

Так следующее не будет работать:

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

Это, как я называю нажмите:

function onEachFeature(feature, layer) { 
    layer.on({ 
     click: panelShow 
    }); 
} 

function panelShow(e) { 
    // This works, the class is added to the clicked element 
    this.getElement().classList.add('active'); 
} 

Но у меня есть кнопки вне этого и должен иметь класс, активный в соответствии с вопросом.

Desired after the 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 is how I deal with the opposite, clicking on the 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"); 
}); 

ПРИМЕЧАНИЕ

In real life on the buttons I am using data attribute but consider it as a class for the example question on here, it's just a paste from a more complex code I have.

Also I am using leafletsJS , that's why the javascript click in the function above.

Answer 1

Один из вариантов:

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'); 
    }); 
} 

Answer 2

Вы должны попытаться получить classList из щелкнутого элемента, а затем перебирать, чтобы найти элемент с соответствующими классами, как

function panelShow(e) { 
    var classes = this.getElement().getAttribute('class').split(" "); // Split to return array of all classes of the clicked element so we can loop through 
    for(var i = 0; i < classes.length; i++) { 
     var singleclass = document.querySelector("." + classes[i]); 
     for(var j = 0; j < singleclass.length; j++){ 
      // Test if the element has the class 'active' before adding if it doesn't 
      if(!(' ' + singleclass[j].className + ' ').indexOf(' ' + 'active' + ' ') > -1) 
       singleclass[j].className += ' active'; 
     }; 
    } 
} 

EDIT My bad! Как указано в комментарии, я обновил свой ответ. Мой синтаксис был сочтен неправильным, поскольку я забыл разбить список классов и добавить "." моим querySelector! Я предполагаю, что вы не хотите использовать jQuery по какой-то причине. Надеюсь, это поможет кому угодно.