Javascript-форум - Как правильно выбирать элементы для Jquery

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как правильно выбирать элементы для Jquery (https://javascript.ru/forum/misc/46300-kak-pravilno-vybirat-ehlementy-dlya-jquery.html)

Sweet,
хочешь вернутся к своему говнокоду где переопределяешь системные объекты http://javascript.ru/forum/305063-post37.html

Цитата:

Сообщение от Bizon4ik

Не годиться вод этот кусок вашего кода: $("#marginfirstscreen").has(event.target).length === 0

id это уникальный идентификатор -- в нормальном случае он неповторяется

Спасибо за ответ, я понял

Bizon4ik,

Цитата:

Сообщение от Bizon4ik

Разве от того что я буду использовать id или класс поменяется логика кода?

да

<!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

хочешь вернутся к своему говнокоду

Злишсо? Обоснуй, почему считаешь, что я наговнокодил, когда не переопределил системный объект.
А знаешь, в чём мякотка, Poznakomlus? Дело в том, что код:

!info.className & (info.className = "active");

, эквивалентен этому:

info.className = "active";

Ты, видимо, имел ввиду вот такой код:

!info.className && (info.className = "active");

Твой ход!:dance:

рони
Я понял о чем вы. Но меня волнует тот факт что блок не прячется, если нажать на кнопку продать.

http://jsfiddle.net/Bizon4ik/nZ3q8/2/

Bizon4ik,
здесь работает
http://learn.javascript.ru/play/3T84ec

Sweet,

Цитата:

Сообщение от Sweet

Ты, видимо, имел ввиду вот такой код:
!info.className && (info.className = "active");

именно так, но и он не нужен достаточно info.className = "active"

Цитата:

Сообщение от Sweet

Твой ход

зачем переопределять глобальные объекты
уверен что XMLHttpRequest, Msxml2.XMLHTTP, Microsoft.XMLHTTP полностью взаимозаменяемые и аналогичные при поведении. Что будет если будет работать к примеру еще одно расширение которое проверив XMLHttpRequest будет применять некорректные методы и подходы для браузера. И все это только ради того, чтобы не объявлять переменную request

Цитата:

Сообщение от Poznakomlus

здесь работает
http://learn.javascript.ru/play/YxBnz

неа -- кликаю внизу страницы блок незакрывается

Цитата:

Сообщение от рони

неа -- кликаю внизу страницы блок незакрывается

поправил, эт уже к стилям
http://learn.javascript.ru/play/3T84ec

body, html {
        background:#ddd;
        width:100%;
        height:100%;
      }