试图找到包含然后匹配数字的属性答案

【问题标题】：Trying to find a attribute that contains and then match the number试图找到包含然后匹配数字的属性
【发布时间】：2020-05-16 10:12:24
【问题描述】：

试图找到一个包含“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-类前缀的元素
使用数据属性会更有意义
不要在 HTML 属性中使用大引号。使用' 或"
在编辑代码时，请确保关闭“智能引号”。

标签： jquery html contains

【解决方案1】：

您的代码的问题是您没有选择 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>

【讨论】：

【解决方案2】：

只有出现在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>

【讨论】：