Выбор категории при помощи показать/скрыть

denas · August 3, 2009

Идея в чем: есть куча элементов разбросанных по странице, они объеденены в несколько классов, есть <select> и <option> в которых выбирается название категории.

Должно произойти следующее: при выборе определенной категории все остальные должны скрыться.

Суть темы: есть код

<html>
<head>

<script type="text/javascript">

function showClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
               tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;

        var pattern = new RegExp(\"(^|\\s)\"+searchClass+\"(\\s|$)\");
        for (i = 0, j = 0; i < elsLen; i++) {
               if ( pattern.test(els[i].className) ) {
                    classElements[j] = els[i];
                   j++;
              }
        }
        return classElements;
}

function hideClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
               tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;

        var pattern = new RegExp(\"(^|\\s)\"+searchClass+\"(\\s|$)\");
        for (i = 0, j = 0; i < elsLen; i++) {
               if ( pattern.test(els[i].className) ) {
                    classElements[j] = els[i];
                   j++;
              }
        }
        return classElements;
}

	var showelements = eval(showClass)
function show() {
	if(showelements.style.display == 'none'){
		showelements.style.display = 'block';
		}
	else{
		showelements.style.display = 'block';
		}
}
	var hideelements = eval(hideClass)
function hide() {
	if(hideelements.style.display == 'block'){
		hideelements.style.display = 'none';
		}
	else{
		hideelements.style.display = 'none';
		}
	}
}
</script>

<style type="text/css">
td.green {
background: #00ff00;
display: block;
width: 50px;
height: 50px;

td.blue {
background: #00ffff;
display: block;
width: 50px;
height: 50px;

td.red {
background: #ff0000;
display: block;
width: 50px;
height: 50px;
} 
</style>

</head>

<body>
	<select>
		<a href="" onClick="showClass('red','','td'); showClass('green','','td'); showClass('blue','','td')"><option>all</option></a>
		<a href="" onClick="showClass('red','','td'); hideClass('green','','td'); hideClass('blue','','td')"><option> red</option></a>
		<a href="" onClick="hideClass('red','','td'); showClass('green','','td'); hideClass('blue','','td')"><option> green</option></a>
		<a href="" onClick="hideClass('red','','td'); hideClass('green','','td'); showClass('blue','','td')"><option> blue</option></a>
	</select>

	<table>
		<tr><td class="red">asdasdasdasd</td><td class="green">qweqweqweqwe</td><td class="blue">zxczxczxczxc</td></tr>
		<tr><td class="green">qweqweqweqwe</td><td class="red">asdasdasdasd</td><td class="blue">zxczxczxczxc</td></tr>
		<tr><td class="blue">zxczxczxczxc</td><td class="red">asdasdasdasd</td><td class="green">qweqweqweqwe</td></tr>
	</table>
</body>

</html>

он является синтезом нескольких идей идеально работавших до добавления к конкретным идеям...

Подскажите кто разбирается в жаваскриптах, в чем тут проблема? Я уже неделю бьюсь над этим, на мой взгляд, бесспорно интересным моментом

Veseloff · August 5, 2009

Используя jquery можно сделать что то типа

<script type="text/javascript">
function qwerty()
{
	$('.red').hide();
	$('.green').hide();
	$('.blue').hide();
	$('.'+$('#sel').val()).show();
}
</script>
<select id="sel" onChange="qwerty()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
<div class="red">Red2</div>
<div class="green">Green2</div>
<div class="blue">Blue2</div>

Sign In

Выбор категории при помощи показать/скрыть

Question

denas

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Veseloff

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information