Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выбрать все, кроме одного div'а. Как? (https://javascript.ru/forum/jquery/9606-vybrat-vse-krome-odnogo-div%27-kak.html)

Юрий Шу 27.05.2010 15:08

Выбрать все, кроме одного div'а. Как?
 
Здравствуйте.
Необходимо сделать, чтобы форма авторизации всплывала при нажатии на ссылку и исчезала при клике в любом месте, кроме всплывающего блока с формой.

Подскажите как это сделать?? Не могу сделать вторую часть задачи (выбрать все, кроме всплывающего блока).

<body>
<p class="login"><a href="#">Log in</a></p>
<div id="appearing-box"> 
   <form action="">
      <fieldset>
         <table>
		    <tr>
			   <td>Логин:</td>
			   <td><input type="text" value="" /></td>
			</tr>
			<tr>
			   <td>Пароль:</td>
			   <td><input type="password" value="" /></td>
			</tr>
			<tr>
			   <td></td>
			   <td><input type="submit" value="Войти" /></td>
			</tr>
		 </table>
	  </fieldset> 
   </form>	    	    
</div>
</body>

$(document).ready(function(){
    $("p.login a").click(function(){ 
        $("#appearing-box").show("fast");
        return false;
    })
     $(":not(#appearing-box)").click(function(){
        $("#appearing-box").hide()
    })
});

exec 27.05.2010 15:12

Ставим onclick на весь документ, смотрим, не является ли event.target нужным вам блоком (или его потомком), если нет — скрываем блок.

Юрий Шу 27.05.2010 15:24

Цитата:

Сообщение от exec (Сообщение 56696)
Ставим onclick на весь документ, смотрим, не является ли event.target нужным вам блоком (или его потомком), если нет — скрываем блок.

А в коде это как выглядеть будет?? Напишите, если не сложно.

exec 27.05.2010 15:40

$(document).click(function(e) {
e = e || window.event;
t = e.target || e.srcElement;
if (!$(t).is('#block') && !$(t).parents().find('#block').size()==0) {
$('#block').hide();
}
});

Юрий Шу 27.05.2010 15:52

$(document).click(function(e){ 
	    e = e || window.event; 
	    t = e.target || e.srcElement; 
	    if (!$(t).is('#appearing-box') && $(t).parents().find('#appearing-box').size()==0) { 
	       $('#appearing-box').hide(); 
	    } 
	});

Убрал отрицание у второго условия. Иначе был обратный эффект.

Еще, не могли бы вы раскрыть смысл 2-ой и 3-ей строк. Не совсем понятно, что это.
А селектором :not нельзя тут обойтись??

e1f 27.05.2010 16:37

Юрий Шу, ввиду того, что используется jQuery, 2-3 строки смысла лишены совершенно -- это нормализация события и target'a, она делается jQuery до обработчика.

Юрий Шу 27.05.2010 16:44

e1f, то есть это как-то сократить можно?
что такое target подскажите тоже…

e1f 27.05.2010 16:47

$(document).click(function(e){
    if (!$(e.target).closest('#appearing-box').length) {
        $('#appearing-box').hide();
    }
});


target либо srcElement (смотря где) -- тот элемент, который инициировал событие

Юрий Шу 27.05.2010 16:57

Цитата:

Сообщение от e1f (Сообщение 56716)
target либо srcElement (смотря где) -- тот элемент, который инициировал событие

это от браузера, я так понимаю, зависит?

e1f 27.05.2010 17:37

Да. Это приведение к кроссбраузерному виду.


Часовой пояс GMT +3, время: 01:11.