Есть ли способ сократить код?

Question

[Павел Антонов]

В javascript/jquery не разбираюсь, возникла задача при наведении на ячейку таблицы подсвечивать все соседние ячейки в этой СТРОКЕ. Таблица сверстана div'ами на bootstrap, соответственно у каждой ячейки есть классы. Вот мой гуглокод, все работает как надо, но мне кажется есть более лаконичное решение моей задачи, подскажите пожалуйста так ли это? Приветствуются все ответы и направления "в какую сторону копать".

Реализовано именно через addClass/removeClass, т.к в случае использования toggleClass, я обнаружил баг, если при загрузке страницы мышка наведена на какую-либо из ячеек, описанных в скрипте, то срабатывал toggleClass, и скрипт работал не правильно, т.е при hover табличка была белой, убираем hover появляется класс gray. А мне нужно наоборот, потому написал так.

<script type="text/javascript">
$(document).ready(function(){
	$( "#tabl1 .type" ).hover(
	  function() {
		$( "#tabl1 .type" ).addClass( "gray" );
	  }, function() {
		$( "#tabl1 .type" ).removeClass( "gray" );
	  }
	);
	$( "#tabl1 .price" ).hover(
	  function() {
		$( "#tabl1 .price" ).addClass( "gray" );
	  }, function() {
		$( "#tabl1 .price" ).removeClass( "gray" );
	  }
	);	

	$( "#tabl1 .params" ).hover(
	  function() {
		$( "#tabl1 .params" ).addClass( "gray" );
	  }, function() {
		$( "#tabl1 .params" ).removeClass( "gray" );
	  }
	);
	
	$( "#tabl2 .type" ).hover(
	  function() {
		$( "#tabl2 .type" ).addClass( "gray" );
	  }, function() {
		$( "#tabl2 .type" ).removeClass( "gray" );
	  }
	);
	$( "#tabl2 .price" ).hover(
	  function() {
		$( "#tabl2 .price" ).addClass( "gray" );
	  }, function() {
		$( "#tabl2 .price" ).removeClass( "gray" );
	  }
	);	

	$( "#tabl2 .params" ).hover(
	  function() {
		$( "#tabl2 .params" ).addClass( "gray" );
	  }, function() {
		$( "#tabl2 .params" ).removeClass( "gray" );
	  }
	);
	
	$( "#tabl2 .params2" ).hover(
	  function() {
		$( "#tabl2 .params2" ).addClass( "gray" );
	  }, function() {
		$( "#tabl2 .params2" ).removeClass( "gray" );
	  }
	);
	
	$( "#tabl3 .type" ).hover(
	  function() {
		$( "#tabl3 .type" ).addClass( "gray" );
	  }, function() {
		$( "#tabl3 .type" ).removeClass( "gray" );
	  }
	);
	$( "#tabl3 .price" ).hover(
	  function() {
		$( "#tabl3 .price" ).addClass( "gray" );
	  }, function() {
		$( "#tabl3 .price" ).removeClass( "gray" );
	  }
	);	

	$( "#tabl3 .params" ).hover(
	  function() {
		$( "#tabl3 .params" ).addClass( "gray" );
	  }, function() {
		$( "#tabl3 .params" ).removeClass( "gray" );
	  }
	);	
	
});
</script>

Всем спасибо за отзывы,
Александр Миранович упростил мой код, большое спасибо ему.
Его реализация кода jsfiddle.net/f48ZD/493

Answer 1

[Александр Миранович]

html код покажите

Comments

[Павел Антонов]

выложил html код и скриншот

[Александр Миранович]

Если правильно понял ваш код, то где то ват так нужно
$('#tabl3 .col-sm-2').hover(
function(){ //over
$(this).addClass('gray').siblings().removeClass('gray');
},
function(){ //out
$(this).removeClass('gray');
}
);

[Павел Антонов]

Александр Миранович: спасибо, но что-то не то)
мой код работает нормально, прост может есть какой то способ не описывать всё для каждой id tabl1, tabl2, tabl3 вдруг таких таблиц будет 10, то код увеличится в 10 раз, может есть какой то цикл или что-то подобное, я просто ну вообще не программист ни разу) поэтому коряво обьясняю

[Александр Миранович]

Вам ребята выше верно писали, что тут вообще js не нужен, достаточно css, ну а если вы уже принципиально решили через js сделать, то попробуйте мой код подстроить, или если у вас уже есть залитай версия, то скиньте ссылку на страницу

[Александр Миранович]

Вот смотрите все работает, я так приблизительно стили набросал jsfiddle.net/f48ZD/483

[Павел Антонов]

Александр Миранович: у вас подсвечиваются столбцы а мне нужны строки :) widestudio.ru/dev_page.html вот живой пример как сейчас все работает с моим скриптом, просто мне кажется что мой скрипт можно сократить во многом) т.к я не кодер

[Александр Миранович]

jsfiddle.net/f48ZD/493 так?

[Павел Антонов]

Александр Миранович: ого ДА ДА ДА :) спасибо, теперь почитаю ваш код и полезу в документацию чтобы понимать как вы это реализовали и почему так не смог я

Answer 2

[Петр]

Это все можно сделать просто на CSS, без javascript. Код сократиться до 0 строк.

Answer 3

[Дмитрий Александрович]

у вас на картинке больше похоже что вы столбцы пытаетесь подсвечивать

.col-sm-2:hover > div {
    border-style: solid;
    border-color: #35146d;
}

может можно чисто css обойтись?

Comments

[Павел Антонов]

я css подсвечиваю столбец, т.к верстка это позволяет, а js я подсвечиваю всю строку ячеек с одинаковыми классами

Answer 4

[Роман Дворянов]

Если нужна именно jquery реализация, то

$( ".type,.price,.params,.params2" ).hover(function() {
       $( this ).addClass( "gray" );
    }, function() {
       $( this ).removeClass( "gray" );
    }
);

Comments

[Павел Антонов]

почти как надо но подсвечивает только ту ячейку на которую наведен курсор, а нужно еще чтобы соседние с таким же классом

[Роман Дворянов]

freislot: значит добавьте каждой колонке общий класс и вешайте событие на него

<div class="my-price col-sm-2" style="height: 574px;">

$('.my-price').hover(function() {
       $( this ).children().addClass( "gray" );
    }, function() {
       $( this ).children().removeClass( "gray" );
    }
);

[Роман Дворянов]

А все понял, я думал вам колонку нужно подсвечивать, ну раз вам уже помогли

Answer 5

[Даниил Конев]

как на счет такого решения?

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
	      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
	      integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
	<style type="text/css">
		.grey {
			background-color: #cccccc;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="row a">
		<div class="col-md-4 el-col">1</div>
		<div class="col-md-4 el-col">2</div>
		<div class="col-md-4 el-col">3</div>
	</div>
	<div class="row b ">
		<div class="col-md-4 el-col">1</div>
		<div class="col-md-4 el-col">2</div>
		<div class="col-md-4 el-col">3</div>
	</div>
	<div class="row c">
		<div class="col-md-4 el-col">1</div>
		<div class="col-md-4 el-col">2</div>
		<div class="col-md-4 el-col">3</div>
	</div>
	<script src="https://code.jquery.com/jquery-2.2.2.min.js"
	        integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
	        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
	        crossorigin="anonymous"></script>
	<script>
		$(function () {
			var a = $(".el-col");
			a.hover(
				function () {
					var self = $(this), parent = self.parent('.row');
					parent.addClass('grey');
				},
				function () {
					var self = $(this), parent = self.parent('.row');
					parent.removeClass('grey');
				}
			);
		})
	</script>
</div>
</body>
</html>

Здесь же можно и для столбцов задать стиль...

Comments

[Павел Антонов]

Спасибо, но это не совсем то, я же говорю подсвечиваться должна вся строка, была бы это таблица то уже есть готовый код, а в силу разметки дивами красивый код не получается. У меня сейчас работает все как нужно, просто пугает объем кода :)

[Даниил Конев]

freislot: а можно html вернуть? а то теперь трудно соориентироваться

[Павел Антонов]

Даниил Конев: а я там ссылку прикрепил с рабочим макетом как все сверстано и скрипт там есть в исходном коде