Появление блока

Hoax · August 12, 2012

Всем привет, вот сделал такую штуку

При клике на #qwer появляется другой блок, код работает, вот только как сделать так чтобы он работал постоянно? Т.е. при клике на один блок, появляется другой, а потом при 2-ом клике он исчезает, но при последующих кликах ничего не происходит.



<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<style>
      #qwer {width:300px;height:300px;background:#b3b3b3;cursor:pointer;}
      #ok {width:300px;height:300px;background:#b3b3b3;display:none;}

  </style>
</head>
<body>

  <div id="qwer"><p>нажми</p>


  </div>

  <div id="ok">ergreg</div>

<script>


  var div = document.getElementById('qwer');
 var p = div.getElementsByTagName('p')

  var divHide = document.getElementById('ok');
  div.onclick = function() {

if (p) {

divHide.style.display = divHide.style.display ? 'none' : 'block';

        }


                            }

</script>

Hoax · August 12, 2012

up

Catherine · August 12, 2012

up

Что, сроки поджимают?

Hoax · August 12, 2012

up
Что, сроки поджимают?

спасибо за бессмысленный ответ в моей теме!

wwt · August 12, 2012

divHide.style.display = divHide.style.display ? 'none' : 'block';

divHide.style.display возвращает:

1 раз - "" что воспринимается как false и блок получает display:block

2 раз - "block" что условием воспринимается как true и блок получает display:none

3 раз и все последующие клики возвращается строка - значит true

значит сравнение должно выглядеть так:

divHide.style.display = divHide.style.display=="block" ? 'none' : 'block';

Edited August 12, 2012 by wwt

Hoax · August 12, 2012

Работает! Но данный код я подстроил под себя...(

Не очень понимаю работу оператора "?", —- раз верно условие, выполняется значение1(true), если нет - значение2(false).

Но что именно обозначает "=" присвоение или что?

Если объясните буду очень благодарен.

wwt · August 13, 2012

Работает! Но данный код я подстроил под себя...(
Не очень понимаю работу оператора "?", —- раз верно условие, выполняется значение1(true), если нет - значение2(false).
Но что именно обозначает "=" присвоение или что?
Если объясните буду очень благодарен.

divHide.style.display = divHide.style.display=="block" ? 'none' : 'block';

Это тернарная условная операция

логическое выражение ? выражение 1 : выражение 2

тоже самое можно написать так( чтоб понятно было):


if(divHide.style.display == "block"){
   divHide.style.display = 'none';
}else{
   divHide.style.display = 'block';
}

Hoax · August 13, 2012

Работает! Но данный код я подстроил под себя...(
Не очень понимаю работу оператора "?", —- раз верно условие, выполняется значение1(true), если нет - значение2(false).
Но что именно обозначает "=" присвоение или что?
Если объясните буду очень благодарен.
divHide.style.display = divHide.style.display=="block" ? 'none' : 'block';
Это тернарная условная операция
логическое выражение ? выражение 1 : выражение 2
тоже самое можно написать так( чтоб понятно было):
if(divHide.style.display == "block"){
   divHide.style.display = 'none';
}else{
   divHide.style.display = 'block';
}

А почему тогда нельзя написать вот так


divHide.style.display=="block" ? 'none' : 'block';

Так же есть условие, и два значения

wwt · August 14, 2012

Работает! Но данный код я подстроил под себя...(
Не очень понимаю работу оператора "?", —- раз верно условие, выполняется значение1(true), если нет - значение2(false).
Но что именно обозначает "=" присвоение или что?
Если объясните буду очень благодарен.
divHide.style.display = divHide.style.display=="block" ? 'none' : 'block';
Это тернарная условная операция
логическое выражение ? выражение 1 : выражение 2
тоже самое можно написать так( чтоб понятно было):
if(divHide.style.display == "block"){
   divHide.style.display = 'none';
}else{
   divHide.style.display = 'block';
}
А почему тогда нельзя написать вот так
divHide.style.display=="block" ? 'none' : 'block';
Так же есть условие, и два значения

да условие есть, два значения есть )) просто так чтоли? ))а где обьект/переменная/итд которому эти значения присваиваются? ))

можно еще так если уж совсем не понятно:


divHide.style.display=="block" ? divHide.style.display = 'none' : divHide.style.display = 'block';

Hoax · August 14, 2012

Спс, последнее понятно , а так же через if тоже, просто как-то не очень привычно писать 2 условия через "="

Edited August 14, 2012 by Hoax

wwt · August 14, 2012

Спс, последнее понятно , а так же через if тоже, просто как-то не очень привычно писать 2 условия через "="

Через = не условие, а присваивание.С помощью него мы придаем значение нашему блоку либо none либо block

Edited August 14, 2012 by wwt

Hoax · August 14, 2012

Все бы хорошо, НО в стилях указано что блок изначально display:none;

т.е. выражение

divHide.style.display = divHide.style.display=="block" ? 'none' : 'block';

я читаю так, *Если diHide имеет display == block, то он становится none, иначе block"

тогда почему вот этот код не работает

divHide.style.display = divHide.style.display=="none" ? 'block' : 'none';

- ведь он фактически тоже самое, только 1 значение подходит, а не второе.

Edited August 14, 2012 by Hoax

wwt · August 14, 2012

Пока свойство display не задано скриптом, divHide.style.display возвращает пустую строку, поэтому при первом клике возвращается именно она, но только при первом, после того как вы присвоили "none" будет возвращаться строка "none"

Если уж совсем хочется без сравнения, то и присваивать нужно не "none", а ""

divHide.style.display = divHide.style.display ? "" : "block";

Edited August 14, 2012 by wwt

Hoax · August 14, 2012

похоже а окончательно запутался :unsure:

Hoax · August 14, 2012

а не уже врубился)

Hoax · August 16, 2012

Ну и ласт вопрос =) вот в данном коде http://learn.javascript.ru/play/tutorial/browser/events/selectable-list.html

Данный код прелогает


if (!e.shiftKey) {
    deselectAllItems(ul);
  }

То, что если был клик не с шифтом (т.е. обычный клик), выполняется ф-я deselectAllItems(ul) . Которая удаляет все классы при клике на <li>, удяляет она да, все кроме одного <li> на которого кликнули, как так?

wwt · August 17, 2012

Ну и ласт вопрос =) вот в данном коде http://learn.javascript.ru/play/tutorial/browser/events/selectable-list.html
Данный код прелогает
if (!e.shiftKey) {
    deselectAllItems(ul);
  }
То, что если был клик не с шифтом (т.е. обычный клик), выполняется ф-я deselectAllItems(ul) . Которая удаляет все классы при клике на <li>, удяляет она да, все кроме одного <li> на которого кликнули, как так?

Смотрите дальше , там следующий код


...
toggleSelectItem(target);
...

собственно вызов функции с передачей ей елемента на который кликнули:

функция выглядит так:

function toggleSelectItem(li) {
  li.className = (li.className == '') ? 'selected' : '';
}

=) то есть опять в тернарном условном операторе присваивается класс selected li по которому кликнули

Edited August 17, 2012 by wwt

Sign In

Появление блока

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information