| Sweet | 06.04.2014 03:26 |
И ваще:
Как правильно выбирать элементы для Jquery
Доброе время суток.
Объясните, пожалуйста, почему в этом примере http://jsfiddle.net/Bizon4ik/nZ3q8/ функция hide() вызывается при нажатии на кнопку, и тем самым не дает запустить функцию show()? И как нужно правильно сделать что бы при нажатии на кнопку блок появлялся, а когда наживает на любое место кроме открытого блока, то этот блок исчезал. Заранее спасибо за ответ. |
Закрытие по клику вне блока
Bizon4ik,
:-?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by Bizon4ik</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
body, html {
background:#ddd;
}
#marginfirstscreen {
width:100%;
height:100%;
position:relative;
z-index:1;
}
#marginfirstscreen .mainbutton {
margin:50px 0 50px 150px;
display:inline-block;
width: 200px;
height: 70px;
position: relative;
z-index:5;
}
#marginfirstscreen .mainbutton h4 {
display:inline-block;
position:relative;
z-index:10;
color:#000;
text-align:center;
width:100%;
height:100%;
margin:0;
padding:0;
line-height:70px;
font-size:2em;
font-family:sans-serif;
}
#marginfirstscreen .mainbutton svg {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
#marginfirstscreen .mainbutton svg line {
stroke-width: 2;
stroke: #fff;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
#marginfirstscreen .mainbutton:hover svg line.top-line {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
#marginfirstscreen .mainbutton:hover svg line.bottom-line {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
#marginfirstscreen .mainbutton:hover svg line.left-line {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
#marginfirstscreen .mainbutton:hover svg line.right-line {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
#buttom-purchase-info {
position:absolute;
margin-top:-70px;
width:400px;
height:400px;
border:1px solid red;
z-index:9;
display:none;
background:#fff;
}
</style>
<script>
$(window).load(function () {
$("#buttom-purchase").click(function (event) {
$("#buttom-purchase-info").show();
event.stopPropagation()
});
$(document).on("click", function (event) {
if ($("#marginfirstscreen").has(event.target).length === 0) $("#buttom-purchase-info").hide();
});
});
</script>
</head>
<body>
<div id="marginfirstscreen">
<div class="mainbutton" >
<h4 id="buttom-purchase">КУПИТЬ</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
<div id="buttom-purchase-info" >
</div>
</div>
</div>
</body>
</html>
|
Без Jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by Bizon4ik</title>
<style>
body, html {
background:#ddd;
}
#marginfirstscreen {
width:100%;
height:100%;
position:relative;
z-index:1;
}
#marginfirstscreen .mainbutton {
margin:50px 0 50px 150px;
display:inline-block;
width: 200px;
height: 70px;
position: relative;
z-index:5;
}
#marginfirstscreen .mainbutton h4 {
display:inline-block;
position:relative;
z-index:10;
color:#000;
text-align:center;
width:100%;
height:100%;
margin:0;
padding:0;
line-height:70px;
font-size:2em;
font-family:sans-serif;
}
#marginfirstscreen .mainbutton svg {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
#marginfirstscreen .mainbutton svg line {
stroke-width: 2;
stroke: #fff;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
#marginfirstscreen .mainbutton:hover svg line.top-line {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
#marginfirstscreen .mainbutton:hover svg line.bottom-line {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
#marginfirstscreen .mainbutton:hover svg line.left-line {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
#marginfirstscreen .mainbutton:hover svg line.right-line {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
#buttom-purchase-info {
position:absolute;
margin-top:-70px;
width:400px;
height:400px;
border:1px solid red;
z-index:9;
display:none;
background:#fff;
}
#buttom-purchase-info.active {
display:block;
}
</style>
</head>
<body>
<div id="marginfirstscreen">
<div class="mainbutton">
<h4 id="buttom-purchase">КУПИТЬ</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
<div id="buttom-purchase-info"></div>
</div>
</div>
<script>
document.onclick = function (e) {
var info = document.getElementById("buttom-purchase-info");
var el = e ? e.target : window.event.srcElement;
if (el.id == "buttom-purchase" & !info.className) {
info.className = "active";
} else {
info.className = "";
}
};
</script>
</body>
</html>
|
Poznakomlus,
Цитата:
|
рони,
так исчезает же и ли я опять не понял все докурил сейчас |
document.onclick = function (e) {
var info = document.getElementById("buttom-purchase-info");
var but = document.getElementById("buttom-purchase");
var el = e ? e.target : window.event.srcElement;
switch (el) {
case but:
!info.className & (info.className = "active");
break;
case info:
break;
default:
info.className = "";
}
};
http://learn.javascript.ru/play/SPOkgb |
Всем спасибо за правильный вариант. А не могли бы вы немного объяснить.
В чем ошибка моей логики? |
|
Цитата:
Но проблема в том что ваш код не работает если на страницы есть еще элементы (если на них наживать, то инфо блок не прячется) Пример: http://jsfiddle.net/Bizon4ik/nZ3q8/1/ ПС: Не годиться вод этот кусок вашего кода: $("#marginfirstscreen").has(event.target).length === 0 |
Посоны, мы же все знаем, что document.onclick - абсолютно не жизнеспособный метод навешивания событий. К чём смысл такого совета?
Но вот такие конструкции просто убивают: !info.className & (info.className = "active"); Ну давай, рассказывай, зачем это нужно:) |
Sweet,
хочешь вернутся к своему говнокоду где переопределяешь системные объекты http://javascript.ru/forum/305063-post37.html |
Цитата:
|
Спасибо за ответ, я понял
|
Bizon4ik,
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by Bizon4ik</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body, html {
background:#ddd;
}
.marginfirstscreen {
width:100%;
height:100%;
position:relative;
z-index:1;
}
.marginfirstscreen .mainbutton {
margin:50px 0 50px 150px;
display:inline-block;
width: 200px;
height: 70px;
position: relative;
z-index:5;
float:left;
}
.marginfirstscreen .mainbutton h4 {
display:inline-block;
position:relative;
z-index:10;
color:#000;
text-align:center;
width:100%;
height:100%;
margin:0;
padding:0;
line-height:70px;
font-size:2em;
font-family:sans-serif;
}
.marginfirstscreen .mainbutton svg {
position: absolute;
top: 0;
left: 0;
z-index:0;
}
.marginfirstscreen .mainbutton svg line {
stroke-width: 2;
stroke: #fff;
fill: none;
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
.marginfirstscreen .mainbutton:hover svg line.top-line {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
.marginfirstscreen .mainbutton:hover svg line.bottom-line {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.marginfirstscreen .mainbutton:hover svg line.left-line {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
.marginfirstscreen .mainbutton:hover svg line.right-line {
-webkit-transform: translateY(-400px);
transform: translateY(-400px);
}
#buttom-purchase-info {
position:absolute;
margin-top:-70px;
width:400px;
height:400px;
border:1px solid red;
z-index:9;
display:none;
background:#fff;
}
</style>
<script>
$(window).load(function(){
$(".buttom-purchase").click(function (event) {
$("#buttom-purchase-info").show();
event.stopPropagation()
});
$(document).on("click", function (event) {
if ($(".marginfirstscreen").has(event.target).length === 0) $("#buttom-purchase-info").hide();
});
});
</script>
</head>
<body>
<div class="marginfirstscreen">
<div class="mainbutton" >
<h4 class="buttom-purchase">КУПИТЬ</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
<div id="buttom-purchase-info" >
</div>
</div>
<div class="mainbutton" id="secondbuttom" >
<h4 class="buttom-purchase">Продать</h4>
<svg width="200" height="70">
<line class="top-line" x1="0" y1="0" x2="600" y2="0" />
<line class="bottom-line" x1="200" y1="70" x2="-400" y2="70" />
<line class="left-line" x1="0" y1="70" x2="0" y2="-400" />
<line class="right-line" x1="200" y1="0" x2="200" y2="470" />
</svg>
</div>
</div>
</body>
</html>
|
Цитата:
А знаешь, в чём мякотка, Poznakomlus? Дело в том, что код: !info.className & (info.className = "active");, эквивалентен этому: info.className = "active";Ты, видимо, имел ввиду вот такой код: !info.className && (info.className = "active");Твой ход!:dance: |
рони
Я понял о чем вы. Но меня волнует тот факт что блок не прячется, если нажать на кнопку продать. http://jsfiddle.net/Bizon4ik/nZ3q8/2/ |
Bizon4ik,
http://jsfiddle.net/nZ3q8/3/ |
Bizon4ik,
здесь работает http://learn.javascript.ru/play/3T84ec Sweet, Цитата:
Цитата:
уверен что XMLHttpRequest, Msxml2.XMLHTTP, Microsoft.XMLHTTP полностью взаимозаменяемые и аналогичные при поведении. Что будет если будет работать к примеру еще одно расширение которое проверив XMLHttpRequest будет применять некорректные методы и подходы для браузера. И все это только ради того, чтобы не объявлять переменную request |
Цитата:
|
Цитата:
http://learn.javascript.ru/play/3T84ec
body, html {
background:#ddd;
width:100%;
height:100%;
}
|
|
Цитата:
|
Цитата:
Цитата:
Цитата:
Так вооот... Я услышал обвинение в том, что пишу говнокод, но не услышал ни одного аргумента! Обоснуй или признай свою неправоту и извинись! Позволь, я продемонстрирую тебе, что такое аргументы.. Ты говнокодишь, потому что: 1. Пишешь код, который не понятен большинству разработчиков. Такие сотрудники, как ты, нафиг не сдались работодателю: ты увольняешься, на твоё место приходит другой и тихо офигевает от твоего "творчества". 2. В твоём коде легко могут быть совершенно неочевидные ошибки, он сложно отлаживается (особенно если это делает не автор). Возвращаясь к & вместо &&. Если бы ты писал как белый человек и опечатался вот так:
if (!info.className) [
info.className = "active";
]
, такая ошибка была бы сразу замечена и исправлена.3. Ты хардкодишь как конченый говнокодер. Изменились id-шники - твой код не работает. Поменялась структура html и в кнопку вложен элемент - твой код не работает, потому что кнопка уже будет e.target. Добавили кнопке класс - твой код всё ломает, потому что: а) проверка !info.className уже не актуальна, но мы-то знаем, что это не важно:) б) info.className = "active" "убивает" все другие классы. Вывод: такого говнокодера как ты, я бы на работу не взял!:) |
Кстати, Poznakomlus, вот тебе на вооружение конструкция в твоём стиле:
var condition = true;
if (condition) [
alert("Fuck мой мозг!!!")
]
:lol: |
Sweet,
window.XMLHttpRequest - это что? Ошибка синтаксиса в моем коде не влияла на работоспособность скрипта. Да вбивал прямо в песочнице и, что ты эти хочешь сказать Идиот я пишу решение задачи как я вижу, потому и привязываюсь к разметке. Если ты не понял то Poznakomlus - говорит о том, что я знакомлюсь с языком. Лучше чем на форуме решив задачи пользователя руку не надобьешь. Выбирай тон своего диалога работадатель хренов. |
Poznakomlus,
на всякий случай код после строк Цитата:
http://learn.javascript.ru/event-delegation возможно вы его и знали. |
Цитата:
Цитата:
if (!window.XMLHttpRequest) {
window.XMLHttpRequest = ...
+ этот полифил нужно подключать через условный комментарий, потому что актуально только для ie. Хз, как еще это объяснить. Если ты ещё хоть раз скажешь, что я переопределяю что-нибудь, идиот, очевидно - это ты! Цитата:
Цитата:
Цитата:
Цитата:
Наш диалог показал, что ты не понимаешь, что я говорю. Поэтому выношу основную свою мысль: Программирование - это командная работа. Поэтому одна из основных задач - писать понятный код. Уважай тех, кому придётся разбираться в твоём коде. Это не дебильный конкурс "Напиши как можно более запутано". |
рони,
спасибо еще раз :) http://javascript.ru/forum/misc/4411...-sobytiya.html Sweet, Цитата:
|
Poznakomlus, чувак, это же шутка. В которой есть доля шутки.:) К тому же почувствуй разницу: "ты дурак?" или "ты дурак!" Я ведь ничего не утверждал.
|
И ваще:
|
Sweet,
я кстати и 10 лет назад писал код :) . И как видишь тогда другого мнения были. http://www.vbnet.ru/samples/download.aspx?id=416 Я знаю несколько языков и мне не раз предлагали написать книги и быть рецензентом. По поводу твоего стеба в адрес моего кода. Скажу не говорите, что мне делать и я не скажу куда вам идти. Причем все начал ты же. На самом деле моими разработками решениями и велосипедами пользуются достаточно людей. И их отзывы для меня более важны чем твои высказывания как и что мне писать. |
| Часовой пояс GMT +3, время: 12:29. |