- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我面临以下问题。
每次我必须使用 querySelectorAll与 Element.classList ,我需要
Element.querySelectorAll
返回的 NodeList 转换为数组jQuery 抽象了上述内容,所以我想开发一个辅助方法,类似于 jQuery 的工作方式,其工作原理如下:
myhelper('.someClass').classList.add('newClass'); // there are more than 1 .someClass items
myhelper('#id').classList.remove('existingClass');
本质上 myhelper(selector)
应该在底层抽象上面的 1+2 点:从 querySelectorAll 获取 NodeList,将其转换为数组,forEach 数组并*执行已执行的方法由用户给出。
最佳答案
我的第一个冲动是建议只使用 jQuery 并在需要的地方进行扩展;)
但是尝试一下:如果 my_Helper
函数用作对象,它可以缓冲元素并包含使用这些元素的函数。如果直接调用my_Helper,它可以强制返回一个新对象。此外,添加的功能可以返回对象本身,因此可以像在 jquery 中一样使用链接。一个使用 addClass 的简单示例:
function my_Helper(query){
if(this.constructor !== my_Helper)
return new my_Helper(query); //if called directly (not as new()), return a new object
this.elements = document.querySelectorAll(query);
this.addClass = function(className) {
for(var el of this.elements)
el.classList.add(className);
return this; //to be able to use chaining
}
return this;
}
my_Helper('.someClass').addClass('newClass').addClass('newClass2'); //2 separate classes to test chaining
.newClass{
width:100px;
height:100px;
}
.newClass2{
border:1px solid black;
}
<div class= 'someClass'></div>
<div class= 'someClass'></div>
<div class= 'someClass'></div>
编辑,根据评论,手动添加额外的方法不会有问题,但希望在不复制 foreach 的情况下更容易添加单个方法?下面有一个通用的 invoke
函数,可以从使用此调用创建其他方法的对象和辅助函数外部调用(并且还引入了一个仅调用 addClass 的 classList 包装器,以使其更容易迁移代码)
function my_Helper(query){
if(this.constructor !== my_Helper)
return new my_Helper(query); //if called directly (not as new()), return a new object
this.elements = document.querySelectorAll(query);
let self = this;
this.invoke = function(property , func, ...pars){
for(let el of self.elements){
if(!func){ //no function given -> property setter
if(property)
el[property] = [pars]
}
else {
let p = property ? el[property] : el; //if no property is given, use element itself
if(!p) continue;
let fn = p[func];
if(!fn) continue; //function does not exist on the property or element
fn.apply(p,pars);
}
}
return self;
}
function fn(property, functionName, ...pars){
return (...pars) => self.invoke(property, functionName, pars);
}
this.addClass = fn('classList', 'add');
this.removeClass = fn('classList', 'add');
this.text = fn('textContent');
this.classList = {add:self.addClass, remove:self.removeClass}; //if classlist has to be used instead of addClass
return this;
}
my_Helper('.someClass').classList.add('newClass').addClass('newClass2').text('aaa');
.newClass{
width:100px;
height:100px;
}
.newClass2{
border:1px solid black;
}
<div class= 'someClass'></div>
<div class= 'someClass'></div>
<div class= 'someClass'></div>
在此基本实现中,调用需要字符串,但它也可以轻松扩展以接受函数。
关于javascript - 使用 querySelectorAll/classList 添加通用类,无需不断循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44242693/
如果这不是一个错误,那就是另一个错误。如果不是那样的话,那就是别的东西了。我觉得我的项目已经改变了很多,现在只是试图解决代码签名问题,结果一切都搞砸了。我严格按照说明进行操作,但出现错误,例如当前的“
我不确定是否有一些我不知道的内置变量或规则,或者 make 是否有问题,或者我只是疯了。 对于我的一个项目,我有一个如下的 makefile: CC=g++ CFLAGS=-O3 `libpng-co
我有大约 10 个 div,它们必须不断翻转,每个 div 延迟 3 秒 这个 codrops 链接的最后一个效果是我正在寻找的,但无需单击 div http://tympanus.net/Devel
我如何使用 jQuery 持续运行 PHP 脚本并每秒获取响应,以及将鼠标上的少量数据发送到同一脚本? 我真的必须添加一些随机扩展才能让这么简单的计时器工作吗? 最佳答案 To iterate is
JBoss 4.x EJB 3.0 我见过如下代码(大大简化): @Stateless @TransactionAttribute(TransactionAttributeType.NOT_SUPPO
使用 PHPStorm,我试图忽略每次尝试进行 git 提交时 pop 的 workspace.xml。 我的 .gitignore 看起来像: /.idea/ .idea/workspace.xml
我是一名优秀的程序员,十分优秀!