Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2017, 13:15
Аватар для scv
scv scv вне форума
Новичок на форуме
Отправить личное сообщение для scv Посмотреть профиль Найти все сообщения от scv
 
Регистрация: 02.04.2016
Сообщений: 6

Объектно-ориентированная реализация связи dom-элемента и javascript-объекта
Столкнулся со следующей проблемой: нужно разработать механизм сворачивания. При клике на ссылке показывается или скрывается блок с контентом. Реализация должна быть объектно-ориентированная, требуется написать класс es6+ или функцию конструктор ~es5, инкапсулирующий в себе работу с dom элементами и событиями. Пример разметки:
<div class="simple-collapse">
<a href="#" class="collapse-control">Control</a>
<div class="collapse-content"></div>
</div>
<script type="text/javascript">
var obSimpleCollapse = new SimpleCollapse(".simple-collapse");
obSimpleCollapse.init();
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2017, 13:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

scv,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2017, 14:27
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

<div class="simple-collapse">
    <a href="#" class="collapse-control">Control</a>
    <div class="collapse-content" hidden>Content</div>
  </div>
  
  <script>
    
    class SimpleCollapse {
      
      constructor(selector) {
        this.elem = document.querySelector(selector);
      }
      
      init() {
        this.elem.querySelector('a').onclick = this.toggleContent.bind(this);
      }
      
      toggleContent() {
        this.elem.querySelector('.collapse-content').hidden = !this.elem.querySelector('.collapse-content').hidden
      }
      
    }
    
    var obSimpleCollapse = new SimpleCollapse(".simple-collapse"); 
    obSimpleCollapse.init();
    
  </script>
Ответить с цитированием
  #4 (permalink)  
Старый 23.03.2017, 07:12
Новичок на форуме
Отправить личное сообщение для Lipon Посмотреть профиль Найти все сообщения от Lipon
 
Регистрация: 19.03.2017
Сообщений: 3

Выше человек написал решение... babel для экспорта модуля вам в помощь...
Для скрытия элемента:
document.getElementById("myP").style.visibility = "hidden";
Или
document.getElementById("myP1").style.display = "none";


Подробнее https://www.w3schools.com/jsref/prop...visibility.asp

Последний раз редактировалось Lipon, 23.03.2017 в 07:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
Как то можно узнать ID HTML элемента вызвавшего JavaScript функцию? Opusel Events/DOM/Window 1 18.12.2011 18:36
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01
Вопрос о циклических ссылках (JavaScript -> Dom -> JavaScipt) BlueIce Events/DOM/Window 10 17.02.2010 21:58