Скрытие элементов.
Приветствую.
Есть интерактивная карта с метками. Нужно чтобы изначально все метки были показаны, а при клике на определенную область карты оставалась метка на этой области а остальные скрывались. Подскажите пожалуйста как это реализовать на jquery, понимаю что нужно использовать событие click. У каждой области карты есть свой класс, например class="india" а у метки для этой области класс class="m_india" Если можно пример кода. |
Вы используете map и area?
|
Цитата:
|
Вариант кроме как проверять через условие не вижу, кто муже в этом варианте много кода, нужно ведь прописывать все классы, потом их проверять и т.д. Мне кажется это можно решить так сказать в "пару строк". Но как, не пойму.
|
вы можете добавить всем меткам один общий класс (плюс к тому что есть), и у вас должен быть общий класс у метки для областей и области.
Дальше все просто, Вы можете забрать класс из области (с помощью attr('class')), в некую переменную, затем убрать из неё все лишнее с помощью replace() и скрыть все метки не имеющие полученный класс |
Допустим у всех областей есть класс area, рассмотрим вариант что надо снять все метки кроме индии, все метки имеют класс label:
$('.area').click(function() {
var class = $(this).attr('class').replace('area ', ''); //класс должен быть "area india"
//теперь переменная class содержит "india"
$('.label').each(function() {
if (!$(this).hasClass(class)) {
$(this).css('display', 'none');
}
})
})
|
Изучайте объектно-ориетированный javascript, Вы заметите что очень многие вещи станут намного-намного проще (например построение связей между событиями и html элементами).
Могу скинуть ссылку на карту выполненную с помощью ООП, и дать комментарии. |
Цитата:
От ссылки не откажусь, лишним не будет. |
http://tsigel.1gb.ru/my_projects/map/index.html
стили я там не делал ещё, я выдрал это из своего проекта, который работает локально |
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
label{
background-color: #FFFFFF;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$('.aria').click(function (event) {
var t=Math.ceil(Math.random()*16777214);
$(this).parent().find('[class ^= "m_"]:visible').hide()
$(this).css({'backgroundColor': '#'+t.toString(16)}).children('[class ^= "m_"]').show()
event.stopPropagation();
})
});
</script>
</head>
<body>
<div class="aria rossia">rossia <label class="m_rossia">rossia</label></div>
<div class="aria india">india <label class="m_india">india</label></div>
<div class="aria shvecia">shvecia <label class="m_shvecia">shvecia</label></div>
<div class="aria polsha">polsha <label class="m_polsha">polsha</label></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:27. |