如何为具有相同样式值的元素设置监听器？答案

【问题标题】：How to set listener for elements that has same style value?如何为具有相同样式值的元素设置监听器？
【发布时间】：2022-01-20 22:19:23
【问题描述】：

我想为所有具有相同样式值的元素设置一个侦听器，它可以设置在其style 属性、.css 文件或<header> 样式标记中的任何位置。经过大量搜索后，我找到了以下代码：

    $("body").on("click", '[style*="cursor:pointer"]', function (e) {
        const ripple = new Ripple();
        ripple.create(e, this.tagName.toLowerCase() == "a" ? 'dark' : 'light');
    });

但它不起作用。我试过style~="pointer"，但这也不起作用。 JS 和 JQuery 对我来说都很棒。

注意：我发现了其他相关问题，例如使用 filter，所以不要告诉我它是重复的，就我而言，如果我想使用过滤器来查找带有 @ 的元素987654327@，我的监听器必须为页面中的所有元素设置，这不合逻辑和优化。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

不幸的是，您不能使用 CSS 选择器通过样式值轻松获取所有元素。这仅适用于在其style html 属性中直接设置值的那些。

你已经提到的JS解决它的唯一方法。那是filter 函数，但你说得对，它根本没有效率。

但也许还有其他方法可以解决此问题？因为实际上很少根据它们的 css 值设置某些元素的行为。更常见的方法是通过类名或标签名来设置它。

所以我不知道上下文，但我会尝试以下方法之一：

如果您能够调整 HTML，请将特定类设置为您想要定位的所有元素。
如果您无法更改 HTML，您可以尝试创建一个包含多个公共属性（标签名、类名）的数组，以您的元素为目标，并在此基础上添加侦听器。

【讨论】：

谢谢，您对其他方式的看法是正确的，目前，我正在使用类选择器“.ripple”，但是对于制作波纹库，如果用户只是添加它并且库处理所有可点击元素的其他作品。