试图找到一个包含然后匹配数字的属性

Question

试图找到一个包含 "launch-overlay-" 的属性，所以即使前后有其他 class，脚本仍然有效。找到后把"active"class加到匹配号div上。这是我目前所拥有的，但是如果 "launch-overlay-" 周围还有其他 class，它将无法工作。 >< 请帮忙

$('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+)/)[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>

试图找到一个包含然后匹配数字的属性

Trying to find a attribute that contains and then match the number

html

jquery

contains