将JavaScript与jQuery混合 [英] Mixing javascript with jquery
问题描述
在单击时,我使用纯javascript将一个类分配给元素(SVG PATH):
On a click I assign a class to my element (SVG PATH) using pure javascript:
this.getElement().classList.add('active');
新类是它已经拥有的其他一系列类的一部分.但是,一旦将这个新类添加到clicked元素中,它还应该为html中具有与clicked元素本身具有任何匹配类的其他元素提供一个.active
类.
The new class is part of a series of other classes it already has. However once this new class is added to the clicked element, it should also give a class .active
to other elements in the html which have any matching classes with the 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>
我不知道哪个按钮具有匹配的类,因为这些类也是动态的.我所知道的是,div将具有与任何按钮的类匹配的任何类.
I don't know which button has a matching class since those classes are dynamic too. All I know is that the div will have any class matching any button's class.
问题在于,出于特定原因,我在点击div时使用纯JavaScript来分配新的类名称(作品):
The thing is that for specific reasons I am using pure javascript to assign a new class name on click on the div (works):
this.getElement().classList.add('active');
因此以下操作将无效:
this.click(function() {
var classes = this.attr('class').split(' ')
classes.forEach(function(elem) {
$('.' + elem).addClass('active');
});
});
这就是我所说的点击":
This how i call the click:
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');
}
但是我在此之外还有其他按钮,需要根据问题激活一个班级.
But I have buttons outside this and needs to have a class active as per the question.
在div点击后需要
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");
});
注意
在现实生活中,我正在使用
data attribute
按钮,但将其视为 此处的示例问题的类,只是我所编写的更复杂代码中的粘贴.
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.
我也在使用 leafletsJS ,这就是javascript单击的原因 上面的功能.
Also I am using leafletsJS, that's why the javascript click in the function above.
推荐答案
一个选项是:
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');
});
}
这篇关于将JavaScript与jQuery混合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!