代码之家 › 专栏 › 技术社区 › brooksrelyt Ozal Zarbaliyev

在添加相同类名的同时减少元素的重复

css javascript

brooksrelyt Ozal Zarbaliyev · 技术社区 · 4 年前

有没有更简单的方法来减少类I的次数?

if (display.hasAttribute("homepage-events")) {
  startDate.classList.add('h6');
  endDate.classList.add('h6');
  startTime.classList.add('h6');
  endTime.classList.add('h6');
  dateContainer.classList.add('mb-2');
  timeContainer.classList.add('mb-2');

  title.classList.add('h5');
  location.classList.add('h6');
  
  item.classList.add('no-pad-top');
  columnLeft.classList.remove('col-md-3');
  columnRight.classList.remove('col-md-9');
  columnLeft.classList.add('col-md-12');
  columnRight.classList.add('col-md-12');
}

这些可以用香草js组合吗?

startDate.classList.add('h6');
endDate.classList.add('h6');
startTime.classList.add('h6');
endTime.classList.add('h6');

2 回复 | 直到 4 年前

JLRishe 4 年前

您可以编写一个简单的helper函数:

function addClass(className, elements) {
    elements.forEach(function (element) {
        element.classList.add(className); 
    });
}

然后使用它:

addClass('h6', [startDate, endDate, startTime, endTime]);

如果能够针对较新的语法,可以编写如下helper函数:

function addClass(className, elements) {
    for (let element of elements) {
        element.classList.add(className);
    }
}

Dhruvi Makvana 4 年前

您可以将它们组合在一个数组中并运行一个循环。

var h6Elements = [startDate, endDate, startTime, endTime]

h6Elements.forEach( e => e.classList.add('h6'))

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前