jquery - 试图找到包含然后匹配数字的属性

Question

试图找到一个包含“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”&gt;click me</div>
<div class=“other-class overlay-2”&gt;click me</div>

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

标签： jqueryhtmlcontains

Answer 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>