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

287

06 февраля 2019, 22:20

Всем привет. Прошу помощи т.к. не получается реализовать самому. Вот код, после объяснение того, что надо:

<a href="#" id="block1" class="block-btn" style="top: 32px; left: 593px;"></a>
<div class="hide-block" data-block-visible="block1" style="top: 20px; left: 447px;">
    <button class="custom-close"></button>
</div>

И так, нужно чтобы при нажатии на ссылку по id находился блок с data-block-visible и соответственно выводил его, дальше подумаю как, либо fadeIn, либо же добавлением класса, это сам модифицирую. И чтобы по нажатии на кнопку окно пропадало. Окон таких будет несколько и желательно, чтобы не было конфликта в закрывании.

Answer 1

Логику написал, остальное допишете сами.

$(document).on('click', '.block-btn', function(e) { 
  e.preventDefault(); 
  var id = $(this).attr('id'); 
  var block = $('div[data-block-visible="' + id + '"]'); 
  block.fadeIn(); // some operation with block 
  console.log('clicked on #' + id); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="block1" class="block-btn" style="top: 32px; left: 593px;">Link</a> 
 
<div class="hide-block" data-block-visible="block1" style="top: 20px; left: 447px;"> 
    <button class="custom-close"></button> 
</div> 
 
<a href="#" id="block2" class="block-btn" style="top: 32px; left: 593px;">Link</a> 
 
<div class="hide-block" data-block-visible="block2" style="top: 20px; left: 447px;"> 
    <button class="custom-close"></button> 
</div> 
 
<a href="#" id="block3" class="block-btn" style="top: 32px; left: 593px;">Link</a> 
 
<div class="hide-block" data-block-visible="block3" style="top: 20px; left: 447px;"> 
    <button class="custom-close"></button> 
</div>