проверки с in
Знатоки, подскажите каким образом осуществлять подобные проверки.
Например, есть div со ссылкой: div - родительский элемент, ссылка - дочерний. Нужно, чтобы при уходе мыши с div этот div скрывался, кроме тех случаев, когда уход происходит на его дочерний элемент (ссылку). Решение, как видится, заключается во фразе "если уходишь не на дочерний элемент, то скрывайся". Для браузеров с поддержкой target/relatedTarget, код такой. Код:
<div id=div1 style="background: gray" Как правильно осуществить данную проверку? |
for (var i=0;i<this.children.length;i++) if(!(event.relatedTarget==this.children[i])) this.style.display = 'none'; |
Раед, спасибо, код работает (наверное ты сознательно использовал в цикле children, а не children[i]).
Но можно ли в принципе осуществить подобную проверку с in (и тем самым избавиться от использования цикла)? |
Цитата:
И этот оператор ожидает левым операндом строку - имя индекса в объекте, поэтому его нельзя использовать для проверки наличия элемента в объекте его надо использовать для проверки наличия элемента с указанным именем. http://javascript.ru/in |
Цитата:
Неужели трудно проанализировать три строчки кода, понять что они делают, и понять что это опечатка?! Цитата:
Вместо проверки что целевой элемент является потомком исходного, можно проверять является ли исходный элемент предком целевого |
Maxmaxmахimus,
У Вас jQuery головного мозга |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
Программирование ради продукта - это в разделе Работа. Во всех остальных разделах форума цель - обмен и накопление опыта, обучение. И если на этапе обучения пропустить основы языка, и написание велосипедов, то можно получить в итоге говнокодера. Именно для этого обучающиеся пишут с нуля сортировки, реализуют с нуля двунаправленные списки и деревья, хотя все это уже релизовано сотни раз до них. Или Вы сразу на jQuery научились писать, минуя этап обучения? Цитата:
Но не зная как устроен велосипед, далеко уехать не получится. Не дальше, чем сломается велосипед, или понадобится велосипед которого еще никто не создал, но который легко можно создать зная как устроены другие велосипеды. Когда вам понадобится сделать 4-х колесный велосипед(чтоб им дети пользовались), вам будет недостаточно взять два уже существующих велосипеда и примотать синей изолентой друг к другу. Получившаяся конструкция будет уродливой, и обладать рядом других минусов, чем если бы вы сделали 4-х колесный велосипед с нуля. В общем если обойти этап создания велосипедов в процессе обучения, можно остаться простым пользователем чужих велосипедов, и не стать профессионалом. |
Цитата:
Только true все-таки возвращается не event.relatedTarget in this.children, а !(event.relatedTarget in this.children) event.relatedTarget in this.children возвращает false Цитата:
Он не является массивом, хотя и похож на него. У него нету некоторых методов массивов(например сортировки, мклейки и иных) А самое главное, он живой в отличии от массива - если вы возьмете HTMLCollection, то при изменении DOM-модели, он также изменится Например(запускать на вашем HTML_коде)
var a = document.getElementsByTagName('a');//тоже HTMLCollection
console.log(a.length);//1
console.log(a[0]);//<a href="">
console.log(a[0].innerHTML);//content
document.getElementsByTagName('div')[0].innerHTML = 'qwe';
console.log(a.length);//0
console.log(a[0]);//undefined
console.log(a[0].innerHTML);//Ошибка - элемента уже нет
Цитата:
В одну строчку но, без in Вы очень хотите использовать именно этот понравившийся вам оператор? |
Цитата:
Цитата:
Цитата:
Правильно ли я понимаю, что псевдомассивы хранят в качестве элементов ссылки на некоторые элементы (через которые собственно можно получить к ним доступ), ведь мы можем обращаться к доступным свойствам этих элементов (например, a[0].innerHTML), хотя приведённый вами пример, Gvozd, вернул строку <a href=""> для a[0] . |
bes,
посмотрите как эмулируются для неподдерживающих броузеров события mouseenter mouseleave http://learn.javascript.ru/mouse-eve...ter-mouseleave там проверяется parentNode - удобнее и с объектами событий все сделано кроссбраузерно |
Цитата:
Вы процитировали мое сообщение не полностью, опустив более важное отличие, а именно живость массива. Вот пример приведенного кода, только a - это уже массив, с одним элементом - ссылкой. Запускать на вашем HTML-е
var a_elem = document.getElementsByTagName('a')[0];
var a = [a_elem];
console.log(a.length);//1
console.log(a[0]);//<a href="">
console.log(a[0].innerHTML);//content
document.getElementsByTagName('div')[0].innerHTML = 'qwe';
console.log(a.length);//1
console.log(a[0]);//<a href="">
console.log(a[0].innerHTML);//content
Как видим для настоящего массива количество элементов не изменилось, и он даже все еще хранит некоторую информацию об элементе которого уже нету в DOM-модели. А HTMLCollection в данном случае вместе с ичсчезновением ссылки, и сам переставал ссылатся на нее, и становился размера 0 ================================================== ====== Вообще массивом является только то, что выдает true на x instanceof Array
var construct = function(){//конструктор объектов - наследующих массив
for(var i =0; i < arguments.length; i++){
this.push(arguments[i]);
}
};
construct.prototype = [];
var a = document.getElementsByTagName('a');
var b = {};
b[0] = 'qwe';
var c = ['qwe']
d = new construct('qwe');
console.log(a.length, a[0], a instanceof Array);//false
console.log(b.length, b[0], b instanceof Array);//false
console.log(c.length, c[0], c instanceof Array);//true
console.log(d.length, d[0], d instanceof Array);//true
Результат: Код:
1 <a href=""> false |
Цитата:
Только для HTMLCollection эти ссылки будут хранится только на живые элементы, если они есть. ПРи их исчезновении, коллекция будет уменьшатся в размерах. А при добавлении новых элементов, наоборот даже расти:
var a = document.getElementsByTagName('a');
console.log(a.length);//1
document.getElementsByTagName('div')[0].innerHTML += '<a href="">content</a>';
console.log(a.length);//2, потому что ссылок уже две
Цитата:
Просто в консоли отладчика он выглядит как такая строка, которую я сюда скопипастил. Запустите мои примеры в консоли firebug(это плагин для FireFox), например. Можно и в отладочной консоли любого другого браузера, благо она есть сейчас во многих браузерах. Цитата:
Зато я привел вам столь же короткий способ решения, без циклов, который будет работать. Даже Pavel M., уже вам говорит о том же самом |
Цитата:
Gvozd, спасибо за пояснения, разницу между массивами и HTML-коллекциями я почувствовал. Цитата:
Цитата:
Если о вариантах получения единственного элемента-ссылки, то в случае с несколькими элементами-ссылками всё равно придётся использовать цикл. Цитата:
|
Кстати, статья http://learn.javascript.ru/mouse-events теперь расположена по адресу http://learn.javascript.ru/mousemove-events.
|
Удалось получить простой и кроссбраузерно работающий код, когда скрытие div происходит только при уходе с него (Pavel M., способ с parentNode в статье, действительно, пригодился, по ходу я просто не понял этой фишки, читая статью до этого, то ли обновлённая статья стала понятнее).
Код:
<div id=div1 style="background: gray" |
Цитата:
|
Цитата:
|
Раед, на мой взгляд простая конструкция это
var foo = null; ;) |
Цитата:
Практически уверен, что нету ни одного стандарта, допускающего такие вольности, и ваш взгляд ошибочен |
for (var i=0;i<this.children.length;i++) {
if(!(event.relatedTarget==this.children[i])) this.style.display = 'none';
}
Gvozd, nerv_,По вашему так лучше? |
Раед,
Вы все еще лепите конструкции в одну строку. Незачем экономить пробелы, или строчки, в ущерб читаемости. То есть экономия строчки никогда неоправдана Вот так гораздо лучше:
for (var i = 0; i < this.children.length; i++) {
if (!(event.relatedTarget == this.children[i])) {
this.style.display = 'none';
}
}
Каждая инструкция в своей строке. Четко видно где начинается и заканчивается блок |
| Часовой пояс GMT +3, время: 08:09. |