27.08.2014, 16:56
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
|
Поднятся на 2 уровня выше в DOM
Всередине созданого окна есть кнопка по нажатию которой вызывается деструктор самого окна. Но для деструктора нужно получить id этого окна. Сначала я подумал передавать this.id, но потом обнаружил, что передается id кнопки. И вместо этого стал использовать такие костыли:
<div class="close" onclick="destroyWindow(this.parentNode.parentNode.id)">
. Но передавать айди родителя родителя я уверен плохая идея (хотя и все работает). Есть ли способ просто поднятся на 2 уровня выше в DOM дереве и получить айди элемента? |
|
27.08.2014, 19:35
|
 |
Профессор
|
|
Регистрация: 19.01.2010
Сообщений: 354
|
|
|
Если закрыть глаза на скрипт в onclick, то подход нормальный. Лучше, конечно, юзать $.closest() или вешать обработчик при создании окна.
И что делает «деструктор»?
|
|
28.08.2014, 15:19
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
Сообщение от ixth
|
Если закрыть глаза на скрипт в onclick, то подход нормальный. Лучше, конечно, юзать $.closest() или вешать обработчик при создании окна.
И что делает «деструктор»?
|
Деструктор разрушает окно, он вызывается в онклик. От и проблема в онклик, скрипт работает, но по-моему он выглядит по-инвалидски. Я думаю, что нужно ну получать элемент по this.parentNode.parentNode, а как-то аккуратнее. На чистом js без библиотек. Я думал пожно просто поднятся на 2 уровня выше в DOM с помощью какой-нить функции |
|
28.08.2014, 15:30
|
 |
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
|
TimohaP,
а зачем передавать id, если можно передать сразу ссылку на элемент?
|
|
28.08.2014, 15:41
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
|
TimohaP, есть ещё offsetParent, применим далеко не всегда, но для модальных окон как раз.)
__________________
29375, 35
|
|
28.08.2014, 16:06
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
|
BETEPAH,
не пойдет, потому-что таких окон будет очень много (от 0 до 100 а можт и больше), т.е юзер сам сможет их открывать, закривать, перетаскивать, установлять фокус и каждому окну дается уникальный айди (при этом проверяется нет ли уже окон с таким самым айди). я бы мог в код добавления окна добавить что-то подобное ...onclick="destroyWindow(' + id + ')"... но проблема в том, что не хватает двух видов лапок: код ограничивается ' такими лапками, onclick - такими " , плюс айди - строка, поєтому его тоже надо в лапки. отсюда и возник вопрос о "this.parentNode.parentNode.id" при кнопке "закрыть", поскольку при просто this передастся айди кнопки.
Aetae,
а если таких окон десятки?
|
|
28.08.2014, 16:36
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
|
Сообщение от TimohaP
|
|
а если таких окон десятки?
|
И? offsetParet ссылается на ближайшего позиционированного(не static) родителя. В случае с модальным окном - это обычно модальное окно и есть, если конечно не злоупотреблять с позиционированием в вёрстке.
Но на самом деле ваш подход изначльно не верен. При праильном подходе вместе с окном в DOM создаётся привязанный javascript объект, хранящий все необходимые данные этого конкретного окна. Никаких путешествий через родителей и детей не требуется.
Пример:
<body>
<input type="text" value="Text text text text">
<input type="button" value="new" onclick="new Modal(previousElementSibling.value)">
<script>
function Modal(text){
var modal = document.createElement('div');
modal.innerHTML = text;
var close = document.createElement('button');
close.innerHTML = 'X';
close.onclick = function(){
modal.parentNode.removeChild(modal)
}
modal.appendChild(close);
document.body.appendChild(modal);
}
</script></body>
__________________
29375, 35
Последний раз редактировалось Aetae, 28.08.2014 в 16:41.
|
|
28.08.2014, 17:18
|
|
Аспирант
|
|
Регистрация: 30.06.2014
Сообщений: 56
|
|
|
Aetae,
но это не модальное окно, все окна будут иметь одинаковые права, просто разные окна будут именть разный з-индекс. я просто хотел узнать можно ли упростить "this.parentNode.parentNode"
|
|
28.08.2014, 17:40
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
-_\\ Это называется "пример".
|
Сообщение от TimohaP
|
|
я просто хотел узнать можно ли упростить "this.parentNode.parentNode"
|
Я ответил: во многих случая можно, offsetParent справится с этим. А такж заметил, что хоть и можно, но не нужно ибо говнокод и показал как примерно надо. Модальное - не модальное, не суть. Если оно генерируется js-ом то и управляться должно им. Никаких выборок "третьего элемента сбоку после десятого снизу ".
Вот тебе пример с разными z-index:
<style>.modal {
position: absolute;
border: 1px solid #000;
padding: 20px;
background: #eee;
}</style>
<input type="text" value="Text text text text">
<input type="button" value="new" onclick="new Modal(previousElementSibling.value)">
<script>
Modal = (function(win){
function Modal(text){
var modal = document.createElement('div');
modal.innerHTML = text;
modal.className = 'modal';
modal.style.top = '100px';
modal.style.left = '100px';
modal.style.zIndex = ++Modal.zIndex;
modal.mousedown = function(){
modal.style.zIndex = ++Modal.zIndex;
}
modal.onmousedown = function(e){
var style = modal.style;
style.zIndex = ++Modal.zIndex;
Modal.active = modal;
Modal.oldX = parseInt(style.left || 0,10) - e.clientX;
Modal.oldY = parseInt(style.top || 0,10) - e.clientY;
}
modal.onmouseup = function(){
Modal.active = false;
}
var close = document.createElement('button');
close.innerHTML = 'X';
close.onclick = function(){
modal.parentNode.removeChild(modal)
}
modal.appendChild(close);
document.body.appendChild(modal);
}
win.addEventListener('mousemove',function(e){
if(Modal.active){
Modal.active.style.left = Modal.oldX + e.clientX + 'px';
Modal.active.style.top = Modal.oldY + e.clientY + 'px';
}
}, false)
Modal.zIndex = 1;
return Modal
}(window));
</script></body>
__________________
29375, 35
Последний раз редактировалось Aetae, 28.08.2014 в 17:50.
|
|
28.08.2014, 22:43
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
|
Сообщение от TimohaP
|
|
не пойдет, потому-что таких окон будет очень много (от 0 до 100 а можт и больше), т.е юзер сам сможет их открывать, закривать, перетаскивать, установлять фокус и каждому окну дается уникальный айди (при этом проверяется нет ли уже окон с таким самым айди). я бы мог в код добавления окна добавить что-то подобное ...onclick="destroyWindow(' + id + ')"
|
мне кажется, вы неправильно поняли, что я писал. Я говорил, что нет необходимости получать id при вызове дестрой-функции, передавать его, а затем в этой функции делать нелепые .getElementById(), если у вас есть сразу уже ссылка на элемент - this.parentNode.parentNode - ее и передавайте
Это, во-первых, уменьшит код, во-вторых, сократит количество выполняемых операций. |
|
|
|
