Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.11.2015, 10:47
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Применить стиль
Здравствуйте! В общем задача вроде как простая, но не могу реализовать. В общем есть таблица, которая создается динамически, в зависимости от того сколько объектов карты находится на экране. Для удобства восприятия у таблицы сделан стиль зебры. Реализовал, что при наведение на строку она меняет цвет и меняется цвет объекта на карте. Теперь делаю обратную задачу, при наведение на объект он подкрашивается и должна подкраситься соответсвующая этому объекту строка. Добавляю ему стиль при помощи класса, но в хромовском инспекторе видно, что цвет перечеркнут, если в том же инспекторе отменить цвет у tr:nth-child(2n+1), то тогда сработает. Я поначалу подумал проблема в приоритетах css , но ведь у nth всего лишь 2, а у класса как минимум 10 . В чем проблема и как её победить? Код ниже:
map.on('pointermove', function(evt){
			var feature = map.forEachFeatureAtPixel(evt.pixel, 
				function(feature, layer){
					return feature;	
				});
			if(feature && flag == false){
				feature2 = feature;
				flag = true;
				 var a = $('.col1, .col2'); 
				 for(i=0; i < a.length; i = i+2){
				 	if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
				 		feature2.setStyle(style_hover);

				 	} 
				 }
				} else if ( feature && flag == true){
					feature2.setStyle(style_unhover);
					feature2 = feature;
					var a = $('.col1, .col2'); 
					for(i=0; i < a.length; i = i+2){
					 	if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
					 		feature2.setStyle(style_hover);
					 		a[i].parentElement.classList.add('active');
					 	} 
					}
				} else if (flag == true){
					feature2.setStyle(style_unhover);			
					flag = false;
				}
		});


caption{
			width: auto;
			font-weight: bold;
		    background-color: #2b73d7;
		    color: white;
		    padding-top: 3px;
		    padding-left: 5px;
		    text-align: left;
		    height: 30px;
		    border-top: 2px solid white;
		    border-left: 2px solid white;
		    border-right: 2px solid white;
		    position: relative;
		}
		tr:nth-child(2n+1){
		    background-color: #78A7E7; 
		}
		tr{
			display: table;
			width:100%;
			table-layout: fixed;
			background-color: #4E8BDE; 
			color: white;			
		}
		tbody tr:nth-child(n+1):hover{
			background-color: #084496;
		}
		th{
			border: 2px solid white;
		}
		.active{
			background-color: #0E438C;
		}
		.cancel img{
			position: absolute;
			top: -10px;
			right: -5px;
			width: 20px;
			height: 20px;			
		}
		.cancel img:hover{
			cursor: pointer;
		}
		#featureTable tbody{
			display: block;
			max-height: 200px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		thead{
			width:100%;
			border-left: 2px solid white;
			border-right: 2px solid white;
		}
		tbody{
			border-right: 2px solid white;
			border-left: 2px solid white;
			border-bottom: 2px solid white;
		}
		td{
			border-bottom: 2px solid white;
			border-left: 2px solid white;
			border-right: 2px solid white;
			text-align: center;
			padding: 1px;
		}
		.col1, .col2{
			width: 33.7%;
		}
	</style>
<body onload="init()">
	<div id="menu">		
		<div id="logo"><img src="img/Gazprom-SpaceSystems.JPG"></div>
		<ul class="menu">
			<li class="nav1"><a id="DrawButton" href="#">Draw</a>
				<ul class="submenu">
					<li><a id="DrawPoint" href="#">Point</a></li>
					<li><a id="DrawLine" href="#">Line</a></li>
					<li><a id="DrawPolygon" href="#">Polygon</a></li>
				</ul>
			</li>
			<li class="nav2"><a id="EditButton" href="#">Edit</a></li>
		</ul>	
	</div>	
	<div id="map" class="map">
		<table id="featureTable" class="unsick">
			<caption>Table Features
				<div class="cancel"><img src="img/cancel.png"></div>
			</caption>
				<thead>
					<tr>
						<th>FID</th>
						<th>Type</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody  id="body">
				</tbody>
		</table>
	</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2015, 10:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от AciDWarrioR
ведь у nth всего лишь 2, а у класса как минимум 10
Не совсем так...
Сообщение от AciDWarrioR
tr:nth-child(2n+1)
Это тег+псевдокласс.
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2015, 11:01
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Да, Вы правы.

Кстати, одну ошибочку нашел, но теперь закрашивается как раз таки через одну, то есть проблема все-таки в приоритете. Как это можно исправить, не ломая в целом структуру кода? Желательно просто добавление одной строки в js?
Ошибка
if(feature && flag == false){
				feature2 = feature;
				flag = true;
				 var a = $('.col1, .col2'); 
				 for(i=0; i < a.length; i = i+2){
				 	if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
				 		feature2.setStyle(style_hover);
				 		a[i].parentElement.classList.add('active'); // Не было!!!

				 	} 
				 }
				} else if ( feature && flag == true){
					feature2.setStyle(style_unhover);
					feature2 = feature;
					var a = $('.col1, .col2'); 
					for(i=0; i < a.length; i = i+2){
					 	if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
					 		feature2.setStyle(style_hover);
					 		a[i].parentElement.classList.add('active');
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2015, 11:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

[quote=AciDWarrioR] .active{[/QUOTE]
tbody tr.active{
			background-color: #0E438C;
		}
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2015, 11:09
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

[quote=рони;395642]
Сообщение от AciDWarrioR
.active{[/QUOTE]
tbody tr.active{
			background-color: #0E438C;
		}
Спасибо большое!! Прямо в цель!)
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2015, 11:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от AciDWarrioR
Как это можно исправить, не ломая в целом структуру кода? Желательно просто добавление одной строки в js?
Любой селектор можно запросто "усилить", просто повторив его и дописав класс.
Т.е. было так
tr {}
tr:nth-child(2n+1) {}

Усилим так
tr.active {}
tr:nth-child(2n+1).active {}
Ответить с цитированием
  #7 (permalink)  
Старый 11.11.2015, 11:21
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Сообщение от ksa Посмотреть сообщение
Любой селектор можно запросто "усилить", просто повторив его и дописав класс.
Т.е. было так
tr {}
tr:nth-child(2n+1) {}

Усилим так
tr.active {}
tr:nth-child(2n+1).active {}
Да я уже понял из ответа рони. Сейчас вопрос не по теме, но всё же вдруг. В таблице ещё реализован скроллбар, потому что объектов на карте планируется много и чтобы она не заполнила собой всё я её ограничил. Сейчас глядя на эту ляпоту с подсвечеваниями мне бросилось в глаза, что хорошо бы было, чтобы таблица перемещалось к подсвеченной строки, это как-нибудь можно реализовать и, если да, то каким способом?
Ответить с цитированием
  #8 (permalink)  
Старый 11.11.2015, 11:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Сообщение от AciDWarrioR
таблица перемещалось к подсвеченной строки
вычислить положение a[i].parentElement и проскролить до него
Ответить с цитированием
  #9 (permalink)  
Старый 11.11.2015, 11:31
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Сообщение от рони Посмотреть сообщение
вычислить положение a[i].parentElement и проскролить до него
Методы не подскажите?))
Ответить с цитированием
  #10 (permalink)  
Старый 11.11.2015, 11:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от AciDWarrioR
Методы не подскажите?
http://dontforget.pro/javascript/pla...ntu-na-jquery/
http://dnzl.ru/view_post.php?id=199
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как объединить 4 одинаковых функции Batyabest Общие вопросы Javascript 2 21.12.2013 22:53
Как программно применить стиль a:hover? Rooner Элементы интерфейса 3 26.10.2012 20:19
Применить стиль к элементу, не содержащего потомка с заданным селектором ? Deff (X)HTML/CSS 4 23.08.2012 16:50
В iframe применить стиль родительского окна Nikoole Элементы интерфейса 6 06.10.2011 21:50
Выделить слово и применить стиль JsLoveR Серверные языки и технологии 5 23.05.2010 20:58