Попытка найти атрибут, который содержит, а затем сопоставить число - PullRequest
Новая
       10

Попытка найти атрибут, который содержит, а затем сопоставить число

0 голосов
/ 30 января 2020

Попытка найти атрибут, который содержит «launch-overlay-», поэтому даже до и после других классов скрипт все равно будет работать. Найдя его, добавьте «активный» класс в div с номером совпадения. Это то, что я имею до сих пор, но если есть другой класс вокруг "launch-overlay-", он не будет работать. > <Помощь, плз. </p> 

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

Ответы [ 2 ]

1 голос
/ 30 января 2020

Вы можете использовать группу захвата, чтобы получить номер наложения только тогда, когда он появляется после 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>
0 голосов
/ 30 января 2020

Проблема с вашим кодом в том, что вы не выбираете идентификатор, вы выбираете все совпадение. Используйте группу захвата.

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