Поднятся на 2 уровня выше в DOM
Всередине созданого окна есть кнопка по нажатию которой вызывается деструктор самого окна. Но для деструктора нужно получить id этого окна. Сначала я подумал передавать this.id, но потом обнаружил, что передается id кнопки. И вместо этого стал использовать такие костыли:
<div class="close" onclick="destroyWindow(this.parentNode.parentNode.id)">. Но передавать айди родителя родителя я уверен плохая идея (хотя и все работает). Есть ли способ просто поднятся на 2 уровня выше в DOM дереве и получить айди элемента? |
Если закрыть глаза на скрипт в onclick, то подход нормальный. Лучше, конечно, юзать $.closest() или вешать обработчик при создании окна.
И что делает «деструктор»? |
Цитата:
|
TimohaP,
а зачем передавать id, если можно передать сразу ссылку на элемент? |
TimohaP, есть ещё offsetParent, применим далеко не всегда, но для модальных окон как раз.)
|
BETEPAH,
не пойдет, потому-что таких окон будет очень много (от 0 до 100 а можт и больше), т.е юзер сам сможет их открывать, закривать, перетаскивать, установлять фокус и каждому окну дается уникальный айди (при этом проверяется нет ли уже окон с таким самым айди). я бы мог в код добавления окна добавить что-то подобное ...onclick="destroyWindow(' + id + ')"... но проблема в том, что не хватает двух видов лапок: код ограничивается ' такими лапками, onclick - такими " , плюс айди - строка, поєтому его тоже надо в лапки. отсюда и возник вопрос о "this.parentNode.parentNode.id" при кнопке "закрыть", поскольку при просто this передастся айди кнопки. Aetae, а если таких окон десятки? |
Цитата:
Но на самом деле ваш подход изначльно не верен. При праильном подходе вместе с окном в 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>
|
Aetae,
но это не модальное окно, все окна будут иметь одинаковые права, просто разные окна будут именть разный з-индекс. я просто хотел узнать можно ли упростить "this.parentNode.parentNode" |
-_\\ Это называется "пример".
Цитата:
Вот тебе пример с разными 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>
|
Цитата:
Это, во-первых, уменьшит код, во-вторых, сократит количество выполняемых операций. |
| Часовой пояс GMT +3, время: 00:02. |