[英]How to append a class if element contains certain CSS property
I want to add 'onclick' functionality to certain elements. 我想为某些元素添加'onclick'功能。 These elements are perfectly targeted with this CSS, setting pointer-events to 'auto':
使用此CSS完美地定位这些元素,将指针事件设置为“auto”:
.custom-collections .o_slideshow .end-group {
pointer-events: auto;
}
.custom-collections > .o_slideshow:first-child,
.custom-collections > .o_slideshow .o_slide[data-id="home_slide"],
.custom-collections > .o_slideshow:last-child {
pointer-events: auto;
}
My javascript currently enables the elements to be dragged (on drag) and previewed (on long touch). 我的javascript目前可以拖动 (拖动)和预览 (长按)元素。 Ultimately, I need it only to be previewed .
最终,我只需要预览它 。
In the javascript, I include this, to disable drag functionality if 'defaultSlide' is one of the classes: 在javascript中,我包括这个,如果'defaultSlide'是其中一个类,则禁用拖动功能:
if (event.target.classList.contains('defaultSlide')) {
// If the slide contains 'defaultSlide', it shouldn't be draggable.
return;
}
How should I append the class defaultSlide
to the elements? 我应该如何将类
defaultSlide
附加到元素? Alternatively, what else could I do, instead of an if class
method, to have my drag-script return immediately? 或者,我可以做什么,而不是
if class
方法,让我的拖动脚本立即返回?
Normally, I would add the class 'defaultSlide' to these elements in javascript when the elements are first created, but that requires a lot of code in my context of bad legacy code 通常,我会在首次创建元素时在javascript中将这些元素的'defaultSlide'添加到这些元素中,但是在我的上下文中需要大量代码来处理错误的遗留代码
If that CSS perfectly targets the elements, you have at least two options: 如果CSS完美地定位元素,则至少有两个选项:
Element#matches
checks to see if the element you call it on matches the CSS selector you provide. Element#matches
检查以查看您调用它的元素是否与您提供的CSS选择器匹配。 So you could use Element#matches
instead of your class check when you get the event, to see if the element matches those selectors: 因此,当您获得事件时,可以使用
Element#matches
而不是类检查,以查看元素是否与这些选择器匹配:
var selectors = '.custom-collections .o_slideshow .end-group, ' + '.custom-collections > .o_slideshow:first-child, ' + '.custom-collections > .o_slideshow .o_slide[data-id="home_slide"], ' + '.custom-collections > .o_slideshow:last-child'; if (event.target.matches(selectors)) { // return; }
document.querySelectorAll
returns a collection of elements that match the CSS selector you provide. document.querySelectorAll
返回与您提供的CSS选择器匹配的元素集合。 So on page load, you could use querySelectorAll
to get all elements matching those selectors and add the class to them: 因此,在页面加载时,您可以使用
querySelectorAll
来获取与这些选择器匹配的所有元素,并将类添加到它们:
var selectors = '.custom-collections .o_slideshow .end-group, ' + '.custom-collections > .o_slideshow:first-child, ' + '.custom-collections > .o_slideshow .o_slide[data-id="home_slide"], ' + '.custom-collections > .o_slideshow:last-child'; document.querySelectorAll(selectors).forEach(function(e) { e.classList.add("defaultSlide"); });
...and then use your existing code that checks for the class when you get the event. ...然后使用现有代码在收到活动时检查班级。
Side note: The object returned by querySelectorAll
only recently got the forEach
method used above; 旁注:
querySelectorAll
返回的对象最近才得到上面使用的forEach
方法; see this answer for details and workaround for slightly out-of-date browsers. 有关稍微过时的浏览器的详细信息和解决方法,请参阅此答案 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.