Как связать кнопку и модальное окно в списке (jquery)?

Question

Поскажите пожалуйста, как связать кнопку и модальное окно в списке (на jquery)

$(".btn").click(function(event) {
    event.stopPropagation();
    $(".modal").toggleClass("show");
});

.modal {
  display: none;
}

.modal.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<ul>
  <li>
    <button class="btn">btn1</button>
    <div class="modal">Tekcт1</div>
  </li>
  <li>
    <button class="btn">btn2</button>
    <div class="modal">Tekcт2</div>
  </li>
  <li>
    <button class="btn">btn3</button>
    <div class="modal">Tekcт3</div>
  </li>
  <li>
    <button class="btn">btn4</button>
    <div class="modal">Tekcт4</div>
  </li>
</ul>

Answer 1

В вашем примере вы обращаетесь ко всем "модальным" элементам. По данной структуре нужно выбрать следующий элемент от button на который нажали.

P.S. Если нет необходимости закрывать другие "модальные" блоки при нажатии на одну из них, можете удалить строку $('.modal').removeClass("show");

$(".btn").click(function(event) {
    event.stopPropagation();
    $('.modal').removeClass("show");
    $(this).next().toggleClass("show");
});

.modal {
  display: none;
}

.modal.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<ul>
  <li>
    <button class="btn">btn1</button>
    <div class="modal">Tekcт1</div>
  </li>
  <li>
    <button class="btn">btn2</button>
    <div class="modal">Tekcт2</div>
  </li>
  <li>
    <button class="btn">btn3</button>
    <div class="modal">Tekcт3</div>
  </li>
  <li>
    <button class="btn">btn4</button>
    <div class="modal">Tekcт4</div>
  </li>
</ul>

Answer 2

Может кому-то понадобиться одно из вариантов решений. Можно с помощью data-атрибутов (элементы получают номер, с помощью php, в цикле)

$(".btn").on("click", function (e) {
    e.stopPropagation();
    let articleBtn = $(this).data("btn");

    $(".modal").each(function () {
      let articleModal = $(this).data("modal");
      if (articleBtn === articleModal) {
        $(this).addClass("show");
      }
    });
  });
  
  //Close modal
  $(window).click(function (event) {
    if ($(event.target).hasClass("modal")) {
      $(event.target).removeClass("show");
    }
  });

.modal {
  display: none;
}

.modal.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul>
  <li>
    <button data-btn="456" class="btn">btn1</button>
    <div data-modal="456" class="modal">Tekcт1</div>
  </li>
  <li>
    <button data-btn="583" class="btn">btn2</button>
    <div data-modal="583" class="modal">Tekcт2</div>
  </li>
  <li>
    <button data-btn="613" class="btn">btn3</button>
    <div data-modal="613" class="modal">Tekcт3</div>
  </li>
  <li>
    <button data-btn="721" class="btn">btn4</button>
    <div data-modal="721" class="modal">Tekcт4</div>
  </li>
</ul>

если нужно без jquery

let arctileBtns = document.querySelectorAll(".btn");
let articleModals = document.querySelectorAll(".modal");
arctileBtns.forEach((el) => {
  el.addEventListener("click", (e) => {
    e.stopPropagation();
    const arctileBtn = e.currentTarget.getAttribute("data-btn");
    for (let i = 0; i < articleModals.length; i++) {
      const articleModal = articleModals[i].getAttribute("data-modal");
      if (arctileBtn === articleModal) {
        articleModals[i].classList.add("show");
      }
    }
  });
});

БЛОГ НА HUSL

Как связать кнопку и модальное окно в списке (jquery)?

Ответы (2 шт):