Почему браузер игнорирует выбранный номер основного элемента в селекторе JQuery?

Question

[Сергей Золотарёв]

Всем доброго вечера!
Дорабатываю сайт для одного благотворительного фонда.
Делаю страницу для совершения пожертвовании. Сама страница состоит из ссылок для выбора способов оплаты и лайтбоксов с выбранным способом оплаты и формой для ввода данных.
Ссылок всего несколько и скрытых лайтбоксов также. При нажатии на ссылку со способом оплаты, открывается отдельный для неё лайтбокс.
В JS-коде применил методы управления нажатием для открытия выбранных лайтбоксов, используя вот такой доступ к элементу лайтбокса и ссылок:

$(".payment-button:nth-child(1) > a");
$(".payment-form:nth-child(1)");

Судя по nth-child-это номера ссылки и лайтбокса и почему-то браузер игнорирует их...
Может, какую ошибку я допустил?

Comments

[Сергей Золотарёв]

Ещё, в отдельных лайтбоксах находится кнопка закрытия и также для кнопки закрытия для каждого лайтбокса применил JQuery-селекторы и браузер ещё игнорирует следующее:

$(".payment-form:nth-child(1) > .form-header div:nth-child(2)");

[Максим Тимофеев]

Судя по nth-child-это номера ссылки

это номер потомка у элемента с классом payment-button
https://api.jquery.com/nth-child-selector/

Может, какую ошибку я допустил?

может, пока нет html кода сложно понять

[Сергей Золотарёв]

Максим Тимофеев, тебе HTML-код:

<h2>Способы пожертвования:</h2>
			 <div class="payment-button">
				 <img src="/media/images/icons/donate/bank-cards.png" />
				 <a href="#">
				     Банковская карта
				 </a>
			 </div>
			 <div class="payment-form desktopel">
			     <div class="form-header">
				     <div>
					     <h2>Оплата банковской картой</h2>
					 </div>
					 <div>
					     <img src="/media/images/icons/site/donate/lbclose.png" align="center"/>
					 </div>
				 </div>
				 <div class="form-logo">
				     <img src="/media/images/icons/site/donate/card.png" />
				 </div>
				 <div class="form-description">
				     <span>Введя сумму пожертвования, вы перейдёте на страницу оплаты в Яндекс.Кассе, где вы отправите данные вашей банковской карты для оплаты пожертвования. А за потверждение оплаты ответит сайт.</span>
				 </div>
				 <div class="form-content bank-card">
					     <div>
						     <span>Сумма платежа(в рублях):</span>
							 <input type="text" class="paydata" placeholder="Например:100" />
						 </div>
						 <div>
						     <button>Отправить</button>
						 </div>
				 </div>
				 
			 </div>
			 <div class="payment-button">
				 <img src="/media/images/icons/donate/yandexmoney.png"/>
				 <a href="#">
				     Яндекс.Деньги
				 </a>
			 </div>
			 <div class="payment-form desktopel">
			     <div class="form-header">
				     <div>
					     <h2>Оплата с помощью кошелька Яндекс.Денег</h2>
					 </div>
					 <div>
					     <img src="/media/images/icons/site/donate/lbclose.png" />
					 </div>
				 </div>
				 <div class="form-logo">
				     <img src="/media/images/icons/site/donate/yamoney.png"/>
				 </div>
				 <div class="form-description">
				     <span>Введя сумму пожертвования, вы перейдёте на страницу оплаты в Яндекс.Кассе, где вы авторизируетесь с вашим кошельком в Яндекс.Деньги для оплаты пожертвования. А за потверждение оплаты ответит сайт.</span>
				 </div>
				 <div class="form-content bank-card">
					     <div>
						     <span>Сумма платежа(в рублях):</span>
							 <input type="text" class="paydata" placeholder="Например:100" />
						 </div>
						 <div>
						     <button>Отправить</button>
						 </div>
				 </div>
				 
			 </div>
			 <div class="payment-button three-link">
				 <img src="/media/images/icons/donate/webmoney.png"/>
				 <a href="#">
				     WebMoney
				 </a>
			 </div>
			 <div class="payment-form desktopel">
			     <div class="form-header">
				     <div>
					     <h2>Оплата с помощью WebMoney</h2>
					 </div>
					 <div>
					     <img src="/media/images/icons/site/donate/lbclose.png" />
					 </div>
				 </div>
				 <div class="form-logo">
				     <img src="/media/images/icons/site/donate/webmoney.png"/>
				 </div>
				 <div class="form-description">
				     <span>Введя сумму пожертвования, вы перейдёте на страницу оплаты в Яндекс.Кассе, где вы авторизируетесь с вашим кошельком в WebMoney для оплаты пожертвования. А за потверждение оплаты ответит сайт.</span>
				 </div>
				 <div class="form-content bank-card">
					     <div>
						     <span>Сумма платежа(в рублях):</span>
							 <input type="text" class="paydata" placeholder="Например:100" />
						 </div>
						 <div>
						     <button>Отправить</button>
						 </div>
				 </div>
				 
			 </div>
			 <div class="payment-button">
				 <img src="/media/images/icons/donate/onlinebank.png"/>
				 <a href="#">
				     Системы интернет-банкинга
				 </a>
			 </div>
			 <div class="payment-form desktopel">
			     <div class="form-header">
				     <div>
					     <h2>Оплата с помощью систем интернет-банкинга(Сбербанк)</h2>
					 </div>
					 <div>
					     <img src="/media/images/icons/site/donate/lbclose.png" />
					 </div>
				 </div>
				 <div class="form-logo">
				     <img src="/media/images/icons/site/donate/onlinebank.png" style="margin-left: -33%;" />
				 </div>
				 <div class="form-description">
				     <span>Введя сумму пожертвования, вы перейдёте на страницу оплаты в Яндекс.Кассе, где вы авторизируетесь с вашей учётной записью в Сбербанк Онлайн для оплаты пожертвования. А за потверждение оплаты ответит сайт.</span>
				 </div>
				 <div class="form-content bank-card">
					     <div>
						     <span>Сумма платежа(в рублях):</span>
							 <input type="text" class="paydata" placeholder="Например:100" />
						 </div>
						 <div>
						     <button>Отправить</button>
						 </div>
				 </div>
				 
			 </div>
			 <div class="payment-button">
				 <img src="/media/images/icons/donate/mobile.png"/>
				 <a href="#">
				     Баланс мобильного телефона
				 </a>
			 </div>
			 <div class="payment-form desktopel">
			     <div class="form-header">
				     <div>
					     <h2>Оплата с помощью баланса мобильного телефона</h2>
					 </div>
					 <div>
					     <img src="/media/images/icons/site/donate/lbclose.png" />
					 </div>
				 </div>
				 <div class="form-logo">
				     <img src="/media/images/icons/site/donate/mobile.png" style="margin-left: -33%;" />
				 </div>
				 <div class="form-description">
				     <span>Введя сумму пожертвования, вы перейдёте на страницу оплаты в Яндекс.Кассе, где вы будете использовать баланс номера вашего телефона для оплаты пожертвования. А за потверждение оплаты ответит сайт.</span>
				 </div>
				 <div class="form-content bank-card" style="margin-top:-2px;">
					     <div>
						     <span>Сумма платежа(в рублях):</span>
							 <input type="text" class="paydata" placeholder="Например:100" />
						 </div>
						 <div>
						     <span>Номер телефона:</span>
							 <input type="text" class="paydata" placeholder="Например:79001234567" />
						 </div>
						 <div>
						     <button style="margin-top:2%;">Отправить</button>
						 </div>
				 </div>
                        </div>

desktopel-класс,где скрывается сам лайтбокс.
payment-form-класс лайтбокса.
payment-button-ссылка со способом оплаты.

[Максим Тимофеев]

Сергей Золотарёв, у Вас в payment-button только одна ссылка, зачем вообще :nth-child Просто

$('.payment-button a').on('click',function(){
alert('меня нажали');
});

[Сергей Золотарёв]

Максим Тимофеев, пробовал ваш пример применить. Только при нажатии на каждую ссылку, открывается самый последний лайтбокс.

[Максим Тимофеев]

Сергей Золотарёв, в моем коде нет открытия лайтбокс-а, а значит Вы что-то в него добавили и раз у Вас работает не правильно - значит добавили не правильно. Или зовите гадалку или покажите что добавили.

[Сергей Золотарёв]

Максим Тимофеев, забыл CSS-код добавить:

.payment-button{
	display:inline-block;
	width:46%;
	height:100px;
	margin-top:1%;
	font-family:'Segoe UI Light',sans-serif;
}
.payment-button  > img{
	margin-top: 5px;
	vertical-align:middle;
}
.payment-button  > a{
	color: #00963e;
	display: inline;
	margin-left: 5px;
	font-size: 136%;
}
.payment-form{
	position:fixed;
	top:10%;
	right:0;
	background-color:#00963e;
	width:50%;
	height:90%;
	color:#ffffff;
	font-family:'Segoe UI Light',sans-serif;
}
.payment-form  > .form-header div:nth-child(1){
	display:inline-block;
	float:left;
	margin-left:1%;
	color:white;
	font-size:80%;
}
.payment-form  > .form-header div:nth-child(1) h2{
	color:white;
	font-size:110%;
	font-family:'Segoe UI Light',sans-serif;
}
.payment-form  > .form-header div:nth-child(2){
	display:inline-block;
	float:right;
	margin-right:1%;
	margin-top:2%;
}
.payment-form  > .form-logo img{
	margin-left: -20%;
	width: 40%;
	margin-top: 5%;
}
.payment-form  > .form-content{
	display:block;
	width:100%;
	margin-top:9px;
}
.payment-form  > .form-content div span{
	font-size:110%;
}
.payment-form  > .form-content div input{
	display:block;
	background-color:#00963e;
	color:white;
	border:solid 2px #ffffff;
	width:85%;
	padding:4px;
	font-family: 'Segoe UI', Arial, Tahoma, sans-serif;
    font-size: 125%;
    border-radius: 18px;
    margin-top:15px;
}
.payment-form  > .form-content button{
	display: block;
	float: right;
	margin-top: 8%;
	margin-right: 38px;
	width: 20%;
	height: 30px;
	color: #ffffff;
	background-color: #00963e;
	font-family: 'Segoe UI', Arial, Tahoma, sans-serif;
	border: 2px solid #ffffff;
	border-radius: 18px;
}
.desktopel{
        display:none;
}

[Максим Тимофеев]

Сергей Золотарёв, css зачем? Код который открывает лайтбокс покажите. Если все на css, тогда откуда js взялся?

[Сергей Золотарёв]

Максим Тимофеев, сама страница:
Здесь и сталкиваюсь с проблемой.

[Максим Тимофеев]

Сергей Золотарёв, предлагаете покопаться пол часа, что бы найти где Вы там открываете лайтбокс?