尝试查找包含该数字的属性，然后匹配该数字。

Question

试图找到一个包含“启动-覆盖-”的属性，因此即使在之前和之后都有其他类，这个脚本仍然可以工作。找到它之后，将“活动”类添加到匹配号div中。到目前为止，这就是我所拥有的，但是如果有其他类围绕着“启动-覆盖”，它将无法工作。><帮助plz。

​

$('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>

​

Answer 1

只有当覆盖号出现在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>

​

Answer 2

您的代码的问题是，您不是选择id，而是选择整个匹配。使用捕获组。

var overlaynum = $(this).attr('class').match(/overlay-1(\d+)/)；

但就我个人而言，我甚至不会在匹配类中使用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>

​