Присвоение класса к элементу

266

12 октября 2017, 11:40

Подскажите пожалуйста как сделать чтобы можно было выбрать пол каждому пассажиру? Для этого нужно присваивать классы chosen, но я не придумаю как это организовать, ведь пассажиров может быть несколько. Если бы один - то проблем не возникло бы, а так... P.S. немножко криво отображается, но суть понятна: при нажатии на Add passenger добавляется новая аналогичная форма для нового пассажира. И еще такой вопрос: почему некоторые поля при создании новой формы меняются местами?

var counter = 1; 
		jQuery("body").on('click', ".add-passanger", function () { 
        jQuery("#ticket_passenger_form").append('<div class="booking-form-i">'+ 
									'<label>First Name:</label>'+ 
									'<div class="input"><input type="text" name="pas_first_name'+counter+'" value=""></div>'+ 
								'</div>'+ 
								'<div class="booking-form-i">'+ 
									'<label>Last Name:</label>'+ 
									'<div class="input"><input type="text" name="pas_last_name'+counter+'" value=""></div>'+ 
								'</div>'+ 
								'<div class="booking-form-i">'+ 
									'<div id="pas_sex_type'+counter+'" class="form-sex">'+ 
										'<label>Male/Female</label>'+ 
										'<div class="sex'+counter+' sex-type chosen">M</div>'+ 
										'<div class="sex'+counter+' sex-type">F</div>'+ 
										'<div class="clear"></div>'+ 
									'</div>'+ 
									'<div class="form-calendar">'+ 
										'<label>Date of birth:</label>'+ 
										'<div class="form-calendar-a">'+ 
											'<select name="pas_birth_day'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 63px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>dd</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 36px; display: inline-block;">dd</span></span>'+ 
										'</div>'+ 
										'<div class="form-calendar-a">'+ 
											'<select name="pas_birth_month'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 63px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>mm</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 44px; display: inline-block;">mm</span></span>'+ 
										'</div>'+ 
										'<div class="form-calendar-b">'+ 
											'<select name="pas_birth_year'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 92px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>year</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 47px; display: inline-block;">year</span></span>'+ 
										'</div>'+ 
									'</div>'+ 
									'<div class="clear"></div>'+ 
								'</div>'+ 
								'<div class="booking-form-i">'+ 
									'<label>Country:</label>'+ 
									'<div class="input"><input type="text" name="pas_country'+counter+'" value=""></div>'+ 
								'</div>'+ 
								 
								'<div class="clear"></div>'+ 
								 
								'<div class="bookin-three-coll">'+ 
									'<div class="booking-form-i">'+ 
										'<label>Citizenship:</label>'+ 
										'<div class="input"><input type="text" name="pas_citizenship'+counter+'" value=""></div>'+ 
									'</div>'+ 
									'<div class="booking-form-i">'+ 
										'<label>Document Series:</label>'+ 
										'<div class="input"><input type="text" name="pas_document'+counter+'" value=""></div>'+ 
									'</div>'+ 
									'<div class="booking-form-i">'+ 
										'<label>Expiry date:</label>'+ 
										'<div class="form-calendar-a">'+ 
											'<select name="pas_doc_day'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 63px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>dd</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 36px; display: inline-block;">dd</span></span>'+ 
										'</div>'+ 
										'<div class="form-calendar-a">'+ 
											'<select name="pas_doc_month'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 63px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>mm</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 44px; display: inline-block;">mm</span></span>'+ 
										'</div>'+ 
										'<div class="form-calendar-b">'+ 
											'<select name="pas_doc_year'+counter+'" class="custom-select hasCustomSelect" style="-webkit-appearance: menulist-button; width: 82px; position: absolute; opacity: 0; height: 32px; font-size: 14px;">'+ 
												'<option>year</option>'+ 
												'<option>01</option>'+ 
												'<option>02</option>'+ 
												'<option>03</option>'+ 
												'<option>04</option>'+ 
											'</select><span class="customSelect custom-select" style="display: inline-block;"><span class="customSelectInner" style="width: 47px; display: inline-block;">year</span></span>'+ 
										'</div>'+ 
										'<div class="clear"></div>'+ 
									'</div>'+ 
								'<div class="clear"></div>'+ 
								'</div>'+ 
								 
								'<a href="javascript:void(0);" class="add-passanger">Add Passenger</a>'+ 
              					'<div class="checkbox">'+ 
                					'<label>'+ 
                  						'<input type="checkbox" name="save_checkbox'+counter+'" value="">'+ 
                  							'Save Personal Info'+ 
                					'</label>'+ 
              					'</div>'+ 		 
              					'<div class="booking-devider"></div>'+						 
							'</div>'); 
counter++; 
 
    }); 
    for (var i=0;i<jQuery(".form-sex").length;i++) { 
    jQuery(".sex"+i+".sex-type").click(function(e) { 
		  e.preventDefault(); 
		  jQuery(".sex"+i+".sex-type").removeClass('chosen'); 
		  jQuery(this).addClass('chosen'); 
		}); 
    }

.booking-left {background:#fff; padding:22px 19px 29px 19px; font-family:'Raleway';} 
.booking-left h2 {font-weight:normal; font-family:'Montserrat'; margin-bottom:18px; font-size:16px; color:#4c4c4c;} 
.booking-form-i label {font-size:12px; display:block; margin-bottom:11px; color:#626262;} 
.booking-form-i {width:48.55%; margin-bottom:18px; float:left;} 
.booking-form-i:nth-child(2n) {float:right;} 
 
.booking-form-i .input {padding:6px 10px 6px 10px; border:1px solid #e3e3e3; -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04);-moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); border-radius:2px;} 
.booking-form-i .input input[type='text'] {border:0px; width:100%; font-size:14px; font-family:'Raleway';} 
.booking-form .checkbox {margin-top:2px;} 
.booking-form .checkbox label {font-size:12px; font-weight:500; color:#848484; font-family:'Raleway'; cursor:pointer;} 
.booking-form .checkbox .jq-checkbox {margin-right:7px;} 
.booking-form-i .textarea {padding:6px 10px 6px 10px; height:113px; border:1px solid #e3e3e3; -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04);-moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); border-radius:2px;} 
.booking-form-i .textarea textarea {resize:none; height:113px; border:0px; width:100%; font-size:14px; font-family:'Raleway';} 
.sex-type {float:left; padding:9px 0px 9px 0px; font-weight:500; width:39px; text-align:center; margin-right:4px; cursor:pointer; border:1px solid #e3e3e3; -webkit-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04);-moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.04); border-radius:2px; font-size:11px; color:#626262;} 
.sex-type.chosen {background:#ff7200; color:#fff; border-color:#e37012; -webkit-box-shadow: inset 0px 1px 2px 0px rgba(50, 50, 50, 0.2);-moz-box-shadow: inset 0px 1px 2px 0px rgba(50, 50, 50, 0.2); box-shadow: inset 0px 1px 2px 0px rgba(50, 50, 50, 0.2);} 
.form-sex {float:left;} 
.form-calendar {float:right; margin-right:2px;} 
.form-calendar-a select,.form-calendar-b select {cursor:pointer;} 
.form-calendar-a {float:left; width:61px; margin-right:6px;} 
.form-calendar-a .customSelectInner {font-size:11px; color:#8a8a8a; padding-left:9px;} 
.form-calendar-a .customSelect {width:100%; padding:7px 0px 7px 0px; border:1px solid #e3e3e3; background:url(img/card-select.png) right top no-repeat; -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05);-moz-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05); box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05); border-radius:2px;} 
.form-calendar-b {float:left; width:90px; margin-right:0px;} 
.form-calendar-b .customSelectInner {font-size:11px; color:#8a8a8a; padding-left:9px;} 
.form-calendar-b .customSelect {width:100%; padding:7px 0px 7px 0px; border:1px solid #e3e3e3; background:url(img/card-select.png) right top no-repeat; -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05);-moz-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05); box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.05); border-radius:2px;} 
.bookin-three-coll .booking-form-i {width:31.35%; margin-right:20px;} 
.bookin-three-coll .booking-form-i:nth-child(2n) {float:left;} 
.bookin-three-coll .booking-form-i:nth-child(3n) {float:right; margin-right:0px;} 
.bookin-three-coll .booking-form-i .form-calendar-b {width:80px;} 
.add-passanger {font-size:12px; color:#848484; font-weight:500; text-decoration:none; margin:4px 0px 0px 0px; padding:0px 0px 0px 14px; float:right; background:url(img/add-pass-icon.png) left top no-repeat; background-position:left 2px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="booking-form" id="ticket_passenger_form"> 
								<div class="booking-form-i"> 
									<label>First Name:</label> 
									<div class="input"><input type="text" value="" name="pas_first_name0" /></div> 
								</div> 
								<div class="booking-form-i"> 
									<label>Last Name:</label> 
									<div class="input"><input type="text" value="" name="pas_last_name0" /></div> 
								</div> 
								<div class="booking-form-i"> 
									<div id="pas_sex_type0" class="form-sex"> 
										<label>Male/Female</label> 
										<div class="sex0 sex-type chosen">M</div> 
										<div class="sex0 sex-type">F</div> 
										<div class="clear"></div> 
									</div> 
									<div class="form-calendar"> 
										<label>Date of birth:</label> 
										<div class="form-calendar-a"> 
											<select name="pas_birth_day0" class="custom-select"> 
												<option>dd</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
										<div class="form-calendar-a"> 
											<select name="pas_birth_month0" class="custom-select"> 
												<option>mm</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
										<div class="form-calendar-b"> 
											<select name="pas_birth_year0" class="custom-select"> 
												<option>year</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
									</div> 
									<div class="clear"></div> 
								</div> 
								<div class="booking-form-i"> 
									<label>Country:</label> 
									<div class="input"><input type="text" name="pas_country0" value="" /></div> 
								</div> 
								 
								<div class="clear"></div> 
								 
								<div class="bookin-three-coll"> 
									<div class="booking-form-i"> 
										<label>Citizenship:</label> 
										<div class="input"><input type="text" name="pas_citizenship0" value="" /></div> 
									</div> 
									<div class="booking-form-i"> 
										<label>Document Series:</label> 
										<div class="input"><input type="text" name="pas_document0" value="" /></div> 
									</div> 
									<div class="booking-form-i"> 
										<label>Expiry date:</label> 
										<div class="form-calendar-a"> 
											<select name="pas_doc_day0" class="custom-select"> 
												<option>dd</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
										<div class="form-calendar-a"> 
											<select name="pas_doc_month0" class="custom-select"> 
												<option>mm</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
										<div class="form-calendar-b"> 
											<select name="pas_doc_year0" class="custom-select"> 
												<option>year</option> 
												<option>01</option> 
												<option>02</option> 
												<option>03</option> 
												<option>04</option> 
											</select> 
										</div> 
										<div class="clear"></div> 
									</div> 
								<div class="clear"></div> 
								</div> 
								 
								<a href="javascript:void(0);" class="add-passanger">Add Passenger</a> 
              					<div class="checkbox"> 
                					<label> 
                  						<input type="checkbox" name="save_checkbox0" value="" /> 
                  							Save Personal Info 
                					</label> 
              					</div> 		 
              					<div class="booking-devider"></div>						 
							</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

bootstrap datetimepicker на iphone увеличивается масштаб экрана [требует правки]

На iPhone при нажатии на окно datetimepicker увеличивается масштаб экрана

232

jQuery

onmouseover/out задержка смены изображений

Пример кода еще сыройБуду переделывать на jQuery

223

HTML

как добавить в D3 js столбчатую диаграмму и подогнать как на картинке ?помогите разобраться

250

HTML

Progressbar и Flask

Добрый день! Суть вопроса в следующем: Какими методами можно организовать передачу значения ProgressBar из Flask-приложения в зависимости от стадии...

303