试图查找包含然后匹配数字的属性

Posted 2023-02-17

[试图查找包含“ launch-overlay-”的属性，因此即使前后有其他类，该脚本也仍然可以使用。找到它之后，将“活动”类添加到匹配号div中。到目前为止，这是我所拥有的，但是如果“启动重叠”周围还有其他课程，那么它将无法正常工作。 >

$('div[class*="overlay-"]').click(function()
  var overlaynum = $(this).attr('class').match(/\d+$/)[0];
  $('.overlay-container-'+overlaynum).addClass('-active');
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=“other-class overlay-1”>click me</div>
<div class=“other-class overlay-2”>click me</div>

<div class=“overlay-container-1”></div>
<div class=“overlay-container-2”></div>

答案

只有在launch-overlay-之后出现，您才可以使用捕获组来获取叠加号：

var overlaynum = this.className.match(/launch-overlay-(\d+)/)[1];
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^  ^^^−−− capture group 1

请注意，因为它是第一个捕获组，所以我是通过[1]而不是[0]来获得数字的（我们不希望[0]中的完全匹配）。

实时示例（我不得不在其中修复一些问题，但它们似乎与问题无关）：

$('div[class*="launch-overlay-"]').click(function()
  // Get the number from the relevant class
  var overlaynum = this.className.match(/launch-overlay-(\d+)/)[1];
  $('.overlay-container-'+overlaynum).addClass('-active');
);

.-active 
    color: blue;
    font-weight: bold;

<div class="other-class launch-overlay-1 other">click me - I have another class</div>
<div class="other-class launch-overlay-2">click me</div>

<div class="overlay-container-1">overlay container 1</div>
<div class="overlay-container-2">overlay container 2</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

另一答案

您的代码存在问题，就是您没有选择ID，而是选择了整个匹配项。使用捕获组。

var overlaynum = $（this）.attr（'class'）。match（/ overlay-1（\ d +）/）[0];

但是我个人甚至不将reg exp与匹配类一起使用。使用数据属性。

$("[data-toggles]").on("click", function () 
  var selector = $(this).data("toggles")
  $(selector).toggleClass("active")
)

.active 
  background-color: yellow;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="other-class" data-toggles=".overlay-container-1">click me</div>
<div class="other-class" data-toggles=".overlay-container-2">click me</div>

<div class="overlay-container-1">X</div>
<div class="overlay-container-2">Y</div>

以上是关于试图查找包含然后匹配数字的属性的主要内容，如果未能解决你的问题，请参考以下文章

❤️Linux三剑客与管道符正则表达式的使用❤️

selenium js语法如何精准匹配去除readonly，其中页面包含多个input，然后在给value赋值2017-10-02

查找所有正则表达式匹配的索引？

XPath 匹配@class 值并包含数字？

java 正则表达式匹配字符串，包含没有数字的单词，并且可以选择用逗号分隔

[attribute] 匹配包含给定属性的元素