HTML+CSS+JavaScript

Создаю конструктор заборов. Пользователь выбирает в selecte необходимый тип забора. При выборе в блоке показывается нужная форма. При выборе из формы определенных позиций забора показывается необходимый блок, который имеет фоном необходимую картинку.
Возникла большая проблема. Если выбрать в одном типе забора необходимый вид и перейти на другой, то блоки с картинками не очищаются. Все файлы я приложил. Помогите пожалуйста

а с чего они должны очищаться если вы нигде не пытаетесь это делать?

Так я и не пойму как это сделать?

сделать всем блокам с рисунками

display: none;

Каким образом это сделать в яваскрипте непонятнод вообще. Подскажите пожалуйста

ну например

$('#zabor>div').fadeOut();

внутри вашей функции Selected спрячет все блоки что в блоке #zabor, добавьте еще те блоки которые нужно спрятать вне #zabor и проблема ваша разрешиться, да еще по поводу чекбоксов надо ли вам их очищать после смены забора? Сейчас они у вас не очищаются

Да, их тоже надо очищать. Будьте добры, подскажите как. Еще очень тяжело с яваскриптом мне разобраться

Сейчас функция выглядит следующим образом

function Selected(t){   var v=$(t).val(); $('#zabor>div').fadeOut();  $('#zaglushki>div').fadeOut(); $('#kruchki>div').fadeOut(); $('#lagi>div').fadeOut(); $('#lagi_metal>div').fadeOut(); $('#lagi_metal2>div').fadeOut(); $('#beton>div').fadeOut(); $('#setka>div').fadeOut(); $('#setka_v_ramke>div').fadeOut(); $('#kreplenie>div').fadeOut(); $('#svarka>div').fadeOut(); $('#doska_spl>div').fadeOut(); $('#zazor>div').fadeOut(); $('#profnastil>div').fadeOut(); $('#polikarbonat>div').fadeOut(); $('#fansys>div').fadeOut(); $('#zabor>div').fadeOut();       $('#'+v).fadeIn(200);   console.log(v); }

Кое-что убирается, но теперь формы стали показываться одна за другой. Помогите решить проблему. Да еще непонятно как чекбоксы все очистить

C фонами разобрался. А вот как быть с чекбоксами?

Негоже так писать, мурыжить каждый объект отдельно, необходимо работать с коллекциями объектов, а для этого прежде чем "кодить" необходимо продумать их html-структуру.

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

Чекбоксы сбрасываются, и делается это установкой значения 0 или false его атрибуту checked. Тут то и понимать нечего, просто надо знать.

Не имея нормальной html-структуры, которая бы была построена именно с учетом выполняемой задачи, и приходиться не писать код, а "городить забор". Программирование, это не напихал всякого, и пусть компьютер дуется, разбирая не понять что, а подчинение всего решаемой задаче.

Вы со своим неумело построенным забором времени вбухаете больше, чем переделать все, как и подобает делать, так как вы городите свой забор уже не первую тему, а еще дело дойдет до "молотка, "гвоздей"...

Так что думайте.

намякнните тогда как лучше это сделать, мне пока ничего в голову не лезет как сделать лучше?
Если делать один блок, а в яваскрипте при каждом выборе писать бекраунд и позиционирование картинки в блоке, то скрипт получится тоже большой. Не знаю что лучше, либо дополнительные блоки создавать и в css для них прописывать всё это, либо яваскрипт увеличивать для каждого выбора.

Друг, если хочешь получить своевременную помощь, вопросы нужно формулировать предельно ясно.
Ты вначале спросил как убирать ненужные опции забора. Я тебе дал готовое решение. Теперь ты спрашиваешь о другом.
Значит, как я тебя понял, теперь тебя интересует, каким образом убирать все картинки, оставляя голые столбы, после выбора нового типа забора?
Я правильно понял?

Спасибо за помощь. С очищением я справился сам. Понимаю что скрипт очень кривой получился.
Пока он работает http://kushiy.myjino.ru/konstruktor-zabora
Но я хочу его переделать под нормальный код. Подскажите пожалуйста как это лучше сделать?

Друг, в архиве файл index.html и маленькое видео с демонстрацией его работоспособности.
Помести index.html в директорию своего проекта, сохранив предварительно index-original.
Успехов!

Вам уже "намякали", единственное, это нужно писать проще, не:

var label = a.value;
var cont_blocks = document.getElementById('blocks');
var blocks = cont_blocks.getElementsByTagName('div');

а:

var label = a.value,     blocks = document.getElementById('blocks').getElementsByTagName('div'); //если родитель не нужен

Я вам не про один блок говорил, а о коллекции. Вы мурыжите бедный JS с каждой новой операцией всеми потрохами своего забора. У любой штакетины есть владелец, это прожилина на которую ее прибили. И ваш забор не болтается сам по себе, а кто-то определяет его местоположение.

Как бы вы в реальности строили забор? Положили бы штакетины за пять кварталов от дома и приносили бы по одной? Вряд ли, и хранили бы их рядом, в одной куче. Вот тоже самое и объекты на странице - если вы строите забор, то потрудитесь один раз обратиться к его элементам, закешировав их, впоследствии обращаясь к ним как уже к выбранным элементам, а не гоняйте без пользы JS и jQuery.

Идентификаторы, будучи уникальными, позволят обратиться по необходимости к каждому элементу отдельно, если сама операция тоже уникальна или такого обращения требуют иные обстоятельства. А связать элементы коллекции забора, которые кешированы, с элементами другого объекта, пусть то список или набор чекбоксов, проще и выгоднее по их индексам. И запускать эффекты у элементов кеша, это пройти циклом по кешу и запустить элементу эффект - это будет не куча строк как у вас, а максимум 3 строки.

Плюс к этому, jQuery позволяет удалить из коллекции текущий элемент, а значит можно скрыть все элементы коллекции, кроме текущей. Это означает, что запись такого задания, это будет уже не цикл, а всего одна строка описывающая цепочку действий, хотя фактически все будет сделано все равно с помощью цикла.

Хватит намекать?