0

На странице есть кнопки:

<button id="btn-1" class="about-btn">About</button>
<button id="btn-2" class="about-btn">About</button>
...и так планируется в будущем N кнопок создать...
<button id="btn-N" class="about-btn">About</button>

При клике на каждую кнопку должно всплывать соответствующее кнопке (btn-N) pop-up окно.

Код поп-апов:

<div id="btn-1-popup" class="pop-up">
   <p>текст поп-апа №1</p>
   <button class="close">X</button>
</div>

...и так у каждой кнопки есть своё окно с уникальным текстом...

<div id="btn-N-popup" class="pop-up">
   <p>текст поп-апа №N</p>
   <button class="close">X</button>
</div>

И вот, например, при клике на #btn-1 появится окошко #btn-1-popup, при клике на #btn-2 появится окошко #btn-2-popup и тд для N добавленных кнопок. Также в каждом поп-апе есть кнопка закрыть.

Подключил jQuery для этого:

$("#btn-1").click(function() {
    $("#btn-1-popup").addClass("visible");
});
$("#btn-1 .close").click(function() {
    $("#btn-1-popup").removeClass("visible");
});

...и так к каждой кнопке свой поп-ап...

$("#btn-N").click(function() {
    $("#btn-N-popup").addClass("visible");
});
$("#btn-N .close").click(function() {
    $("#btn-N-popup").removeClass("visible");
});

А вот если у меня будет много таких кнопок на сайте, например за 50 шт., и к каждой отдельно в jQuery надо прописывать целый блок кода.

Вопрос: как автоматизировать код jQuery или на JS подобное можно реализовать чтобы прописать по шаблону один раз и всё?

1 ответ 1

1
$('.about-btn').on('click', function(){
    var id = $(this).attr('id');
    $('#' + id + '-popup').show();
});

$('.pop-up .close').on('click', function(){
    $(this).parent().hide();
});

Вот и весь шаблон

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.