Javascript-форум - Создание простенькой карты с возможностью скрытия(отображения) элементов

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Создание простенькой карты с возможностью скрытия(отображения) элементов (https://javascript.ru/forum/jquery/17528-sozdanie-prostenkojj-karty-s-vozmozhnostyu-skrytiya-otobrazheniya-ehlementov.html)

Создание простенькой карты с возможностью скрытия(отображения) элементов

Привет всем. Появилась задачка небольшая, впринципе нашел решение..но хочется как то упростить код.
Задача: Создать карту с нанесенными на нее метками. Я создал примитивный макет (Серое поле - это типа карта, красные зеленые и синие дивы на этой карте - это типа метки). Также есть небольшая менюшка для скрытия\отображения меток. Тобишь при клике на ссылку "Красный" скрываются(отображаются) красные метки, при клике на ссылку "Зеленый" скрываются(отображаются) зеленые метки и т.д.

вот мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('a.one').click(
function(){
var elem = $('div.one');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});

$('a.two').click(
function(){
var elem = $('div.two');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});

$('a.three').click(
function(){
var elem = $('div.three');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});

});
</script>
<style type="text/css">
div.map {
width:200px;
height:200px;
position: relative;
background:#CCC;
}
div.map div {
width:10px;
height:10px;
position: absolute;
}
div.one {
background:#0F0;
}
div.two {
background:#F00;
}
div.three {
background: #00F;
}
</style>
</head>
<body>

<div class="map">
<div class="one" style="top:10px; left:10px;"></div>
<div class="one" style="top:30px; left:30px;"></div>
<div class="one" style="top:50px; left:10px;"></div>
<div class="two" style="top:10px; left:30px;"></div>
<div class="two" style="top:30px; left:10px;"></div>
<div class="two" style="top:50px; left:30px;"></div>
<div class="three" style="top:50px; left:50px;"></div>
</div>
<div class="menu">
<a class="one" href="#">Зеленый</a><br />
<a class="two" href="#">Красный</a><br />
<a class="three" href="#">Синий</a>
</div>
</body>
</html>

Код работает...НО! если обратить внимание на код JAVASCRIPT то любой уважающий себя программист скажет что это не совсем удобно...Сделать как то надо чтобы при нажатии на ссылку в <DIV CLASS="MENU"> функция javascript сама чтобы определила CLASS у этой ссылки, нашла DIV с таким же классом и скрыла его....

Вот как это сделать ребят?! я не могу сообразить...подскажите..мо� �ет кто сталкивался с подобной проблемой?!

jQuery.ready(function($){
	var marks = {};
	var $allMarks = $("div.map>div");
	var reNameOfMarks = /\b(?:one|two|three)\b/;
	
	marks['one'] = $allMarks.filter("one");
	marks['two'] = $allMarks.filter("two");
	marks['three'] = $allMarks.filter("three");
	
	$("div.menu").delegate('a',"click", function( e ){
		var name = reNameOfMarks.exec(e.currentTarget.className);
		if ( name.length && marks.hasOwnProperty( name[0] ) ) {
			marks[ name[0] ].toggle();
		}
	});
	
});

nikita.mmf , я не хочу что бы в коде фигурировала ONE, TWO , THREE

я вот пытаюсь вот что сделать...простенько....но только как прально условие написать?!

$('div.menu a').click(
 function(){
 var clas = $(this).attr("class");
 if(div.hasClass(clas)){
	 СКРЫТЬ ЭТОТ ДИВ КОТОРЫЙ ИМЕЕТ ТАКОЙ КЛАСС
	 }
 });

вот какой сценарий писать чтобы скрыть его?!

Даже вот так.....

$('div.menu a').click(
 function(){
 var clas = $(this).attr("class");
 $('div').hasClass(clas).hide();
 });

не могу понять почему он это не выполняет?!

$('div.menu a').click(function(){
    $('div').filter( "." + this.className ).hide();
});

Чуток усовершенствовал код

$('div.menu a').click(function(){ 
	if($('div').filter( "." + this.className ).is(":hidden")){
    $('div').filter( "." + this.className ).show(); 
	}
	else{
		$('div').filter( "." + this.className ).hide();
		}
});

теперь при первом клике он его скрывает, при втором клике отображает
NIKITA.mmf спасибо ....

в jQuery есть функция toggle

Я стараюсь не использовать эту функцию.....а все потомучто если для отображения использовать show() в этой функции toggle то у меня все в норме ....а если использовал бы я slideDown(200) для отображения ДИВА с большим количесвом символов в нем...то там небольшой глюк случается....что то типа небольшого "скочка" при завершении анимации.