Форум

ju39ks · #1 (**permalink**) 05.02.2014, 14:27

нужен небольшой фильтр для сайта. нашел принцип реализации, как это можно сделать и немного переделал под свои нужды:

<select>
 <option>Категория автомобиля</option>
 <option onClick="f_go(1);">джип</option>
 <option onClick="f_go(2);">седан</option>
 <option onClick="f_go(3);">хэтчбек</option>
 <option onClick="f_go(4);">автобус</option>
</select>

<DIV id="jeep">джип</DIV>
<DIV id="bus">автобус</DIV>
<DIV id="sedan">седан</DIV>
<DIV id="hatchback">хэтчбек</DIV>

JS тоже переписал и он вроде как работает. то есть я выбираю категорию "джип" мне показывает содержимое в контейнере jeep. и т. д.
только вот если DIVов с jeep будет несколько:

<DIV id="jeep">джип1</DIV>
<DIV id="jeep">джип2</DIV>
<DIV id="jeep">джип2</DIV>

то он показывает только первую, остальные не показываются. как сделать, чтобы показывались все DIVы с jeep?

рони · #2 (**permalink**) 05.02.2014, 14:43

Сообщение от ju39ks

нужен небольшой фильтр для сайта

на форуме 100500 этих фильтров ... вам повезло найти решение среди самых старых

внедрить его как ненужно

Сообщение от ju39ks

option onClick

и умудриться ничего ничего незнать про id

повесить класс на нужные элементы - при выборе класса обойти все эти элементы и изменить style.display

kostyanet · #3 (**permalink**) 05.02.2014, 16:17

Сообщение от ju39ks

как сделать, чтобы показывались все DIVы с jeep?

Так не делают. Делают так: либо загружают нормальный массив со всем барахлом, либо загружают нормальный массив с конкретным барахлом с сервера.

DeUM · #4 (**permalink**) 05.02.2014, 20:00

Сообщение от ju39ks

Насколько я знаю "id" содержит в себе уникальность и распространяется только на 1 объект, да и с js не ладит(т.е. Не стоит плодить копии, id должен быть уникальным).

<DIV class="jeep">джип1</DIV>
<DIV class="jeep">джип2</DIV>
<DIV class="jeep">джип2</DIV>

Vlasenko Fedor · #5 (**permalink**) 06.02.2014, 01:00

<style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
    <select onchange="show(this);">
      <option disabled selected>Категория автомобиля</option>
      <option value="jeep">джип</option>
      <option value="sedan">седан</option>
      <option value="hatchback">хэтчбек</option>
      <option value="bus">автобус</option>
    </select>
      <DIV class="hide jeep">джип</DIV>
      <DIV class="hide bus">автобус</DIV>
      <DIV class="hide bus">автобус1</DIV>
      <DIV class="hide sedan">седан</DIV>
      <DIV class="hide sedan">седан2</DIV>
      <DIV class="hide hatchback">хэтчбек</DIV>
    <script>
      var actels;
       function show(el) {
        var els = document.querySelectorAll('div.' + el.value),
          len = els.length,
          clsName, thisel, l;
        if (actels) for (l = actels.length; l--;) {
          thisel = actels[l];
          clsName = thisel.className.replace(' show', '');
          thisel.className = clsName;
        }
          actels = els;
          for (; els[--len].className += ' show', len;);
        }
    </script>

рони · #6 (**permalink**) 06.02.2014, 01:46

Poznakomlus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
</head>

<body>

    <select onchange="show(this);">
      <option  selected>Категория автомобиля</option>
      <option value="jeep">джип</option>
      <option value="sedan">седан</option>
      <option value="hatchback">хэтчбек</option>
      <option value="bus">автобус</option>
    </select>
      <DIV class="hide jeep">джип</DIV>
      <DIV class="hide bus">автобус</DIV>
      <DIV class="hide bus">автобус1</DIV>
      <DIV class="hide sedan">седан</DIV>
      <DIV class="hide sedan">седан2</DIV>
      <DIV class="hide hatchback">хэтчбек</DIV>
    <script>
    function show(el) {
    var els = document.querySelectorAll("div"),
        l = els.length - 1,
        clsName,
        div;
    for (; div = els[l--];) {
        clsName = div.className;
        if (clsName.indexOf(el.value) != -1) clsName = clsName.replace("hide", "show");
        else clsName = clsName.replace("show", "hide");
        div.className = clsName
    }
     };
    </script>

</body>

</html>

Vlasenko Fedor · #7 (**permalink**) 06.02.2014, 03:18

рони,

<style>
	.hide {
		display: none;
	}
	.show {
		display: block;
	}
</style>
<select id="brand">
	<option disabled selected>Категория автомобиля</option>
	<option value="jeep">джип</option>
	<option value="sedan">седан</option>
	<option value="hatchback">хэтчбек</option>
	<option value="bus">автобус</option>
</select>
<div id="result">
	<div class="hide jeep">джип</div>
	<div class="hide bus">автобус</div>
	<div class="hide bus">автобус1</div>
	<div class="hide sedan">седан</div>
	<div class="hide sedan">седан2</div>
	<div class="hide hatchback">хэтчбек</div>
</div>
<script>
	brand.onchange = function () {
		for (
			var els = document.querySelectorAll("#result>div"), 
			l = els.length, clsName, div; 
			l--;
		)
		div = els[l], clsName = div.className, 
		div.className = clsName.indexOf(this.value) != -1 
			? clsName + ' show'
			: clsName.replace(' show', '');
	}; 
</script>

поправил синтаксис написания

рони · #8 (**permalink**) 06.02.2014, 03:26

Сообщение от Poznakomlus

el thisel

рони · #9 (**permalink**) 06.02.2014, 03:31

Poznakomlus,

<style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
    <select id="brand">
      <option disabled  selected>Категория автомобиля</option>
      <option value="jeep">джип</option>
      <option value="sedan">седан</option>
      <option value="hatchback">хэтчбек</option>
      <option value="bus">автобус</option>
    </select>
    <div id="result">
      <div class="hide jeep">джип</div>
      <DIV class="hide bus">автобус</DIV>
      <DIV class="hide bus">автобус1</DIV>
      <DIV class="hide sedan">седан</DIV>
      <DIV class="hide sedan">седан2</DIV>
      <DIV class="hide hatchback">хэтчбек</DIV>
    </div>
    <script>
      brand.onchange = function () {
        var els = document.querySelectorAll("#result>div"),
          l = els.length,
          clsName, div;
        for (; l--;)
        	div = els[l], clsName = div.className,
        	div.className = clsName.indexOf(this.value) != -1 ? clsName + ' show' : clsName.replace(' show', '');
      };
    </script>

Vlasenko Fedor · #10 (**permalink**) 06.02.2014, 03:32

Сообщение от рони

el thisel

поправил, IE8 disabled зря убрал

Форум

Справочник

Discord чат

Курсы javascript