Всем привет!
Нужно сделать подсветку и выделение по клику одинаковых строк в таблице.
Нашел пример, который прям то, что мне надо:
http://jsfiddle.net/HEmM4/
Внедрил в таблицу - не работает. Попробовал на чистом файле просто воспроизвести этот пример - не получается. JQuery работает, тест проходит.
Что я делаю не так? Вот мой файл. Вроде все то же самое на фидле рабоает, а у меня нет.... хостинг мастерхост.
[spoiler]
<html>
<body>
<head>
<style type="text/css">
.clicked, .hovered {
font-weight: bold;
}
.gr {
cursor: pointer;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(".gr").mouseover(function(){
var group = $(this).data('group');
$('.'+group).addClass('hovered');
});
$(".gr").mouseleave(function(){
var group = $(this).data('group');
$('.'+group).removeClass('hovered');
})
$(".gr").click(function(){
var group = $(this).data('group');
if($(this).hasClass('clicked')){
$('.'+group).removeClass('clicked');
}else{
$('.'+group).addClass('clicked');
}
})
</script>
<!-- Проверка работы jQuery -->
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<br/>This text append by jQuery');
});
</script>
</head>
<div style="overflow: hidden;">
<div style="float: left">
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group2" data-group="group2">group2</div>
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group2" data-group="group2">group2</div>
<div class="gr group3" data-group="group3">group3</div>
<div class="gr group1" data-group="group1">group1</div>
<div class="gr group3" data-group="group3">group3</div>
<div class="gr group2" data-group="group2">group2</div>
</div>
</div>
</body>
</html>
[/spoiler]