将javascript与jquery混合使用

点击一下，我使用纯javascript为我的元素（SVG PATH）分配一个类：

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

新类是它已有的一系列其他类的一部分。 但是，一旦将这个新类添加到单击的元素中，它还应该为.active中的其他元素提供一个类.active ，它与所单击的元素本身具有任何匹配的类。

HTML：

我不知道哪个按钮有匹配的类，因为这些类也是动态的。 我所知道的是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'); } 

但我在这之外有按钮，需要按照问题激活课程。

div点击之后需要

这是我如何处理相反的，点击按钮（并工作）：

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

注意

在按钮的现实生活中，我使用data attribute但在此处将其视为示例问题的类，它只是来自我所拥有的更复杂代码的粘贴。

我也使用leafletsJS ，这就是为什么javascript单击上面的函数。

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

编辑我的坏！ 正如评论中指出的那样，我已经更新了我的答案。 我的语法错误，因为我忘了拆分class级列表并添加“。” 到我的querySelector ！ 我假设你不想出于某些原因使用jQuery。 我希望这可以帮助任何人。