Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2018, 14:59
Аспирант
Отправить личное сообщение для doox911 Посмотреть профиль Найти все сообщения от doox911
 
Регистрация: 01.04.2013
Сообщений: 56

Пропадает выделение
Доброго времени суток. Помогите понять почему пропадает выделение? Оно появляется после ухода курсора с элемента. А должно по нажатию на него. И если кликнуть в край блока с классом label_select_fild не срабатывает onclick, но mouseover срабатывает, почему?
<div class="popup_container">
			<div class="popup">
				<div class="popup__navigation">
					<div class="popup_close">
						X
					</div>
				</div>
				<div class="popup__search">
					<div class="popup__search__block">
						<div class="popup__search_text">
							<h2> Где искать?</h2>
						</div>
						<div class="popup__search_text">
							<h2> Порядок вывода?</h2>
						</div>
					</div>
					<div class="popup__search__block">
						<div class="popup__search_select">
							<div class="block_label">
								<div id="bli_1" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">ID</span>
										<input style="display:none;" type="radio" name="field" value="id">
									</label>
								</div>
								<div id="bli_2" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Дата</span>
										<input style="display:none;" type="radio" name="field" value="date">
									</label>
								</div>
								<div id="bli_3" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Дилер</span>
										<input style="display:none;" type="radio" name="field" value="dealer">
									</label>
								</div>
								<div id="bli_4" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Менеджер</span>
										<input style="display:none;" type="radio" name="field" value="manager">
									</label>
								</div>
							</div>
							<div class="block_label">
								<div id="bli_5" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Юридическое лицо</span>
										<input style="display:none;" type="radio" name="field" value="ur_name">
									</label>
								</div>
								<div id="bli_6" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">ИНН ЮЛ</span>
										<input style="display:none;" type="radio" name="field" value="ur_inn">
									</label>
								</div>
							</div>
							<div class="block_label">
								<div id="bli_7" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Адрес</span>
										<input style="display:none;" type="radio" name="field" value="address" checked>
									</label>
								</div>
								<div id="bli_8" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">История</span>
										<input style="display:none;" type="radio" name="field" value="histoty">
									</label>
								</div>
								<div id="bli_9" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Оборудование</span>
										<input style="display:none;" type="radio" name="field" value="tool">
									</label>
								</div>
							</div>
						</div>
						<div class="popup__search_select">
							<div class="block_label">
								<div id="bli_10" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Возрастание</span>
										<input style="display:none;" type="radio" name="sort" value="ask">
									</label>
								</div>
								<div id="bli_11" class="block_label__item">
									<label class="label_select_fild">
										<span class="label_select_fild__text">Убывание</span>
										<input style="display:none;" type="radio" name="sort" value="desk" checked>
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="popup__search__block">
						<div class="popup__search_text">
							<h2> Какой статус?</h2>
						</div>
					</div>
					<div class="popup__search__block">
						<div class="popup__search_status">
							<!--
							В будущем с динамическую подгрузку статусов
							-->
							<select>
								<option class="select_status" name"select_status" value="0" selected >Не учитывать</option>
								<option class="select_status" name"select_status" value="1" >Не обработано</option>
								<option class="select_status" name"select_status" value="2" >Авторизовано</option>
								<option class="select_status" name"select_status" value="3" >Не авторизовано</option>
								<option class="select_status" name"select_status" value="4" >Реализовано</option>
								<option class="select_status" name"select_status" value="5" >Не реализовано</option>
								<option class="select_status" name"select_status" value="6" >Авторизация прекращена</option>
								<option class="select_status" name"select_status" value="7" >Авторизация продлена</option>
								<option class="select_status" name"select_status" value="8" >Авторизация просрочена</option>
								<option class="select_status" name"select_status" value="9" >Запрос актуальности</option>
							</select>
						</div>
					</div>
				</div>
				<div class="popup__footer">
					<div class="popup_submit">
						Найти
					</div>
				</div>
			</div>
		</div>

// Подсветим checked
	$('.block_label__item input:radio:checked').parent().parent().css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
	// выделяем при наведении
	$('.block_label__item').on('mouseover', function() {
		$(this).css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
	});
	//снимаем выделение только у не выбранных
	$('.block_label__item').on('mouseout', function() {
		var elem = $(this).children().children();
		if ($(elem[1]).attr('checked') != 'checked'){
			$(this).css({'background-color':'white', 'color':'#ccc'});
		}
	});

	$('body .block_label__item').on('click', function(event) {
		event.preventDefault();
		var elem = $(this).children().children();
		var name = $(elem[1]).attr('name');
		var mas_input = $('.block_label__item input[name="'+name+'"]');
		for(i=0; i<mas_input.length;i++){
			$(mas_input[i]).attr('checked', false);
		}
		$('.block_label__item input[name="'+name+'"]').parent().parent().css({'background-color':'white', 'color':'#ccc'});
		$(elem[1]).attr('checked', true);
		$(elem[1]).css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
	});

	$('.main-title').on('click', function (){
		$('main').addClass('custom_blur');
		$('.popup_container').css({'display':'flex'});
		$('.popup').fadeIn(800);
	});
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2018, 23:57
Аспирант
Отправить личное сообщение для doox911 Посмотреть профиль Найти все сообщения от doox911
 
Регистрация: 01.04.2013
Сообщений: 56

Заработало. Надо было так выбирать:
$('.block_label__item input[checked="checked"]:radio')

$('.block_label__item input[checked="checked"]:radio').parent().parent().css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});

$('body .block_label__item').on('click', function(event) {
		event.preventDefault();
		var elem = $(this).children().children();
		var name = $(elem[1]).attr('name');
		var mas_input = $('.block_label__item input[name="'+name+'"]');
		for(i=0; i<mas_input.length;i++){
			$(mas_input[i]).attr('checked', false);
		}
		$('.block_label__item input[name="'+name+'"]').parent().parent().css({'background-color':'white', 'color':'#ccc'});
		$(elem[1]).attr('checked', true);
		$('.block_label__item input[checked="checked"]:radio').parent().parent().css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
	});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оставить выделение при смене фокуса DZHETIGAPA Events/DOM/Window 5 01.02.2018 20:11
Выделение в браузерах ТОТ_САМЫЙ Оффтопик 4 01.10.2015 01:12
Выделение содержимого в input Marv Элементы интерфейса 8 20.07.2012 14:18
Выделение текста в текстовом поле. Как снять выделение с пробела вконце? Roman Koff Events/DOM/Window 10 01.07.2010 16:48
Выделение одиночных тэгов Pattern Events/DOM/Window 7 26.05.2009 23:29