Mischen Sie Javascript mit jquery

Question

Auf einem Klick zuweisen ich eine Klasse zu meinem Element (SVG PATH) mit reinem javascript:

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

Die neue Klasse ist Teil einer Reihe von anderen Klassen ist es bereits hat. Sobald diese neue Klasse jedoch zum angeklickten Element hinzugefügt wird, sollte sie auch eine Klasse .active an andere Elemente im HTML-Code übergeben, die übereinstimmende Klassen mit dem angeklickten Element selbst haben.

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> 

Ich weiß nicht, welche Taste eine passende Klasse hat, da diese Klassen zu dynamisch sind. Alles, was ich weiß, ist, dass das Div jede Klasse haben wird, die der Klasse eines Buttons entspricht.

Die Sache ist die, dass aus bestimmten Gründen wir reine Javascript sind mit einem neuen Klassennamen auf Klick auf dem div zuweisen (arbeitet):

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

ist also folgende funktioniert nicht:

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

Diese, wie ich den Klick rufen:

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

Aber ich habe Tasten außerhalb und muss eine Klasse aktiv nach der Frage haben.

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

HINWEIS

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

Eine Option ist:

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

Sie sollten versuchen, die classList des angeklickten Element zu bekommen und dann iterieren Element mit passenden Klassen wie

zu finden

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

BEARBEITEN Mein schlechtes! Wie im Kommentar erwähnt, habe ich meine Antwort aktualisiert. Meine Syntax war völlig falsch, da ich vergessen habe, meine Klassenliste aufzuteilen und hinzuzufügen. " zu meinem querySelector! Ich gehe davon aus, dass Sie jQuery aus irgendeinem Grund nicht verwenden möchten. Ich hoffe, das hilft jedem.