Правильно ли я делаю, закрытие блока, JS

240

07 февраля 2018, 14:40

Начал знакомство с JS. Мне необходимо закрывать блок по клику на крестик. В блоке (<div>) есть button с background в виде крестика, на нем событие onclick="closeBlock(cityBlock);", в качестве аргумента/параметра передается элемент/id блока который надо закрыть. Код функции :

    function closeBlock(block)
    {
        var container = $("#" + block.id);
        container.slideToggle("slow");
    }

Функцию я не захотел делать так var container = $("#cityBlock"); потому что подумал, что эту функцию, в будущем может понадобится вызывать и в другим местах на закрытие блоков с другими id. Все работает, но мне почему то кажется что так делать не правильно, именно вот этот кусок $("#" + block.id);, или все нормально и так писать допустимо?

Answer 1

С помощью jQuery можно сделать так:

$(".event-btn").click(function() { 
  $(this).parent().find(".toggleElement").toggleClass("hidden"); 
});

.hidden { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="toggle-block">Block 1 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div> 
<div class="toggle-block">Block 2 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div> 
<div class="toggle-block">Block 3 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div> 
<div class="toggle-block">Block 4 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div> 
<div class="toggle-block">Block 5 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div> 
<div class="toggle-block">Block 6 <a href="#" class="event-btn">Click</a> <span class="toggleElement hidden">123</span></div>

Answer 2

То что вы написали можно проделать и без использования jQuery

function myCloseFunction(id) { 
  document.getElementById(id).style.display = 'none'; 
}

<div> 
  <div id="div1">1-й вариант без исп. вспомогательной функции и адресацией по id<button type="button" onclick="document.getElementById('div1').style.display='none';">Close</button></div> 
  <div id="div2">1-й вариант с исп. вспомогательной функции и адресацией по id<button type="button" onclick="myCloseFunction('div2')">Close</button></div> 
  <div id="div3">2-й Предпочтительный вариант без привязки к id (предполагается что кнопка в этом случае ребенок первого уровня)<button type="button" onclick="parentElement.style.display='none';">Close</button></div> 
</div>

Ясное дело что так топорно никто в реальности уже давно не делает, но вдруг надо именно такое поведение