Фильтр объектов для сайта

@Madarok · Регистрация: 01.02.2018

Студворк — интернет-сервис помощи студентам

Добрый день, уважаемые разработчики.

У меня на сайте идет наполнение через базу данных MySQL и мне нужно отсортировать объекты находящиеся в ней по тегам.
То есть при выборе какой-либо подгруппы отображаются все элементы подходящие для этой подгруппы, а остальные скрываются.

Есть такой скрипт, он скрывает ненужные объекты, но просто оставляет дыры в сайте, то есть выглядит это как на картинке

JavaScript
1
2
3
4
5
6
7
8
9
var div = document.querySelectorAll('div');
        document.querySelector('select').onchange=function(){
            idSel = this.value;
            [].forEach.call(div, function(el){
                el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
 
            });
 
        };

Вложение 935354

Вложение 935355

Код в PHP на странице

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 $tab="SELECT * FROM `video` ORDER BY `video`.`num` DESC"; 
  $result=mysql_query($tab);
  $num=mysql_numrows($result);
  echo("<div class=\"zag\"><p>Заголовок</p></div>");
echo("<select class=\"select\">
        <option value=\"*\">All</option>
        <option value=\"tag1\">TAG1</option>
        <option value=\"tag2\">TAG2</option>
        <option value=\"tag3\">TAG3</option>
    </select>
");
  echo("<div align=\"center\" class=\"divhead3\" ><table border=0 width=1068 align=center id=\"all-flavors\"><tr>");
  for ($a=0; $a<$num; ++$a) //открытие цикла 1
     {
       $b=mysql_fetch_array($result);
    if ($a%3==0) {echo("</tr><tr>");}
       echo("<td class=\"tab101\"><div class=\"lineVideo\" id=\"$b[class]\"><a href=\"https://www.youtube.com/embed/$b[videoNum]?rel=0&fs=1&autoplay=1\" class=\"lightbox2\"><img src=\"video/$b[preview].jpg\"><img src=\"pictures_logo/logo.png\" class=\"Play\"><div class=\"polosa\"><p>$b[videoText]</p></div></a></div></td>");
           
    
       
      }  //закрытие цикла 1
 
echo("</tr></table></div>");
  mysql_close();   
?>

Можно ли из этого скрипта сделать так чтобы остальные элементы смещались к началу, чтобы заполнить те пробелы, что создаются при скрытии ненужного.

@sad67man · 08.05.2018, 19:25

Madarok, Картинки не видны.

@Madarok · 10.05.2018, 08:17 **[ТС]**

Так, надеюсь, заработает

@Madarok · 10.05.2018, 10:01 **[ТС]**

Проблему решил.
Можно закрыть тему.
Решение выбрал такое.
Перевел эти элементы и отображения таблицей во флексы и дыр не стало

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	08.05.2018, 19:25
	Madarok, Картинки не видны. 0

@Madarok 0 / 0 / 0 Регистрация: 01.02.2018 Сообщений: 22
	10.05.2018, 08:17 [ТС]
	Так, надеюсь, заработает 0

@Madarok 0 / 0 / 0 Регистрация: 01.02.2018 Сообщений: 22
	10.05.2018, 10:01 [ТС]
	Проблему решил. Можно закрыть тему. Решение выбрал такое. Перевел эти элементы и отображения таблицей во флексы и дыр не стало 0