用可重用的JavaScript函数管理CSS中的状态

在CSS中，确定最有效的状态管理方法是一个具有挑战性的问题，但是谢天谢地，有许多基于OOCSS的方法提供了一些好的解决方案。文章系列： 1. 使用可重用的JavaScript函数在CSS中管理状态（您在这里！）我最喜欢的是CSS（Scalable and modular architecture for CSS），它包含有状态类。引用smass自己的文档，有状态类是：状态是扩展和覆盖所有其他样式的东西。例如，手风琴部分可能处于折叠或展开状态。消息可能处于成功或错误状态。状态通常作为布局规则应用于同一元素，或作为基本模块类应用于同一元素。我最常用的有状态类之一是is-active。以前面引用的手风琴为例，is-active在本例中应用所有必需的CSS样式来表示扩展状态。如下面的示例所示：您将注意到，当检测到click事件时，有一些JavaScript在组件上切换is-active类：var = 0; i This works fine, but if we slot it into our accordion JavaScript there\"s a problem:var = function(elem){elem.classList.toggle(\"is-active\");}for(var =>Although the makeActive函数是可重用的，我们仍然需要首先编写代码来获取组件及其任何内部元素，因此，当然还有很大的改进空间。要进行这些改进，我们可以利用HTML5的自定义数据属性：A data-active属性已经添加到元素中，该元素以前在单击时触发了is-active切换。这个属性的值表示应该在其中进行is-active切换的元素，它和以前一样是顶级c-accordion元素。注意添加了一个新的js-accordion类，而不是挂接到现有的c-accordion类中。这是为了将组件的功能方面从它的样式中分离出来。让我们来看看JavaScript:// Grab all elements with data-active attributevar = 0; i Adding number suffixes to each js-accordion参考确实解决了这个问题，但这是一个我们可以不用的麻烦。一个好的解决方案是对我们的可重用函数实现作用域，这将使我们能够封装我们的切换，以便它们只影响我们想要的元素。要实现作用域，我们需要创建一个单独的自定义属性，名为data-active-scope。它的值应该表示切换应该封装在其中的父元素，在这个实例中是父js-accordion元素。Using the above HTML, the following behaviour should happen:When you click the first accordion, because it has a scope set to js-accordion，只有data-active元素匹配或是这个js-accordion实例的子元素将有is-active被切换。当您单击没有范围的第二个accordion时，is-active将在js-accordion的所有实例上切换。前提是data-active-scope设置正确，每个js-accordion元素中的任何类切换都应该被封装，而不考虑任何冲突的类名。下面是修改后的Javascript和一个工作示例，显示了有无data-active-scope属性：// Grab all elements with data-active attributevar = function(child, match) {if (!child || child == document) {return null;}if (child.classList.contains(match) || child.nodeName.toLowerCase() == match) {return child;}else {return closestParent(child.parentNode, match);}}// Loop through if any are foundfor(var = closestParent(this, this.getAttribute(\"data-active-scope\"));}if(scopeElement) {// Grab scoped linked elementvar = Array.prototype.slice.call(linkedElement);// Check if our scope matches our target element and add to array if true.// This is to make sure everything works when data-active matches data-active-scope.if(scopeElement.classList.contains(this.getAttribute(\"data-active\"))) {linkedElement.unshift(scopeElement);}}else {// Grab linked elementvar = 0; i < linkedElement.length; i++) {linkedElement[i].classList.toggle(\"is-active\");}});}超越是活动的我们的可重用功能现在正在工作很好，是一个有效的方法设置is-active开关上的各种组件。但是，如果我们需要为另一个有状态类设置一个类似的切换呢？按照目前的情况，我们必须复制函数并将is-active的所有引用更改为新的有状态类。效率不高。我们应该改进可重用函数，通过重构数据属性来接受任何类。与其将data-active属性附加到触发器元素，不如将其替换为以下内容： 2. When you click the first accordion, because it has a scope set to js-accordion，只有data-active元素匹配或是这个js-accordion实例的子元素将有is-active被切换。 3. 当您单击没有范围的第二个accordion时，is-active将在js-accordion的所有实例上切换。

用可重用的JavaScript函数管理CSS中的状态

用可重用的JavaScript函数管理CSS中的状态

使用JavaScript获取CSS自定义属性值

弥合CSS和JavaScript之间的鸿沟：JS中的CSS

WordPress用Javascript获取和修改Gutenberg post内容

为什么我要用JavaScript编写CSS

WordPress中的表情符号——注入css和javascript

通过JavaScript获取CSS旋转值

WordPress自定义程序中Javascript单击/更改事件的行为不一致

WordPressJavascript不工作

弥合CSS和JavaScript之间的鸿沟：CSS模块、PostCSS和CSS的未来