|
|
06.02.2013, 12:33
|
|
Аспирант
|
|
Регистрация: 12.04.2012
Сообщений: 43
|
|
|
Скрытие элементов.
Приветствую.
Есть интерактивная карта с метками.
Нужно чтобы изначально все метки были показаны, а при клике на определенную область карты оставалась метка на этой области а остальные скрывались.
Подскажите пожалуйста как это реализовать на jquery, понимаю что нужно использовать событие click.
У каждой области карты есть свой класс, например class="india" а у метки для этой области класс class="m_india"
Если можно пример кода.
Последний раз редактировалось modestes, 06.02.2013 в 12:39.
|
|
06.02.2013, 12:43
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Вы используете map и area?
Последний раз редактировалось tsigel, 06.02.2013 в 12:54.
|
|
06.02.2013, 12:56
|
|
Аспирант
|
|
Регистрация: 12.04.2012
Сообщений: 43
|
|
Сообщение от tsigel
|
|
Вы используете map и area?
|
Да |
|
06.02.2013, 13:00
|
|
Аспирант
|
|
Регистрация: 12.04.2012
Сообщений: 43
|
|
|
Вариант кроме как проверять через условие не вижу, кто муже в этом варианте много кода, нужно ведь прописывать все классы, потом их проверять и т.д. Мне кажется это можно решить так сказать в "пару строк". Но как, не пойму.
|
|
06.02.2013, 13:08
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
вы можете добавить всем меткам один общий класс (плюс к тому что есть), и у вас должен быть общий класс у метки для областей и области.
Дальше все просто, Вы можете забрать класс из области (с помощью attr('class')), в некую переменную, затем убрать из неё все лишнее с помощью replace() и скрыть все метки не имеющие полученный класс
Последний раз редактировалось tsigel, 06.02.2013 в 13:18.
|
|
06.02.2013, 13:14
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Допустим у всех областей есть класс 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');
}
})
})
|
|
06.02.2013, 13:28
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Изучайте объектно-ориетированный javascript, Вы заметите что очень многие вещи станут намного-намного проще (например построение связей между событиями и html элементами).
Могу скинуть ссылку на карту выполненную с помощью ООП, и дать комментарии.
|
|
06.02.2013, 13:39
|
|
Аспирант
|
|
Регистрация: 12.04.2012
Сообщений: 43
|
|
|
Сообщение от tsigel
|
Изучайте объектно-ориетированный javascript, Вы заметите что очень многие вещи станут намного-намного проще (например построение связей между событиями и html элементами).
Могу скинуть ссылку на карту выполненную с помощью ООП, и дать комментарии.
|
Спасибо за пример, получилось )).
От ссылки не откажусь, лишним не будет. |
|
06.02.2013, 15:06
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Вариант...
<!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>
|
|
|
|
