03.02.2016, 15:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Heny
|
|
как удалить именно div блок при клике на ссылку
|
Поясните "зачем удалить" и почему "по ссылке"? Если вы пробуете то, что "получать динамически из базы наборы", то могу уверить, что удаления чего-то по умолчанию в этом ну просто не должно быть. ) |
|
04.02.2016, 09:08
|
|
Аспирант
|
|
Регистрация: 27.01.2016
Сообщений: 35
|
|
а что должно? может есть какой-нибудь урок на эту тему? а то я как ежик в тумане, не иначе(
Вот я такой урок нашла, и по нему начала делать
http://www.lezhenkin.ru/examples/php/dynamic-select/
Последний раз редактировалось Heny, 04.02.2016 в 10:08.
|
|
04.02.2016, 11:09
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Да, по сути это и есть, но в большей мере какими будут параметры запроса, что нужно запрашивать на севере и ему возвращать определяется данными в базе, их организацией. Например, если данных по какому либо из выборов пользователя не много и вложенность запросов, то есть последовательное построение списков от первого до последнего также не велико, то и не обязательно запрашивать их один за другим, можно вернуть все данные на единственный запрос определяющий весь набор этих данных. И не обязательно строить списки, элементы на клиенте нужно выбирать те, что будут удобными в каждом конкретном случае.
Допустим, в базе хранятся некие панели, которые пользователь выбрал. Сервер вернул все что имеется, какие есть материалы текстур и какие текстуры.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
ul {
padding: 0;
}
label {
display: block;
}
li {
list-style: none;
padding: 2px;
margin-bottom: 1px;
border: 1px solid #eee;
}
li, li * {
cursor: pointer;
}
li:hover {
border-color: #ccc;
background-color: #eee;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
//объект из возвращенным сервером данных
var data = {
'wood' : [['pine', 'Сосна', 250, '1.img'], ['oak', 'Дуб', 300, '2.img'], ['birch', 'Береза', 350, '3.img']],
'rock' : [['granite', 'Гранит', 400, '4.img'], ['marble', 'Мрамор', 450, '5.img']]
};
$('#map input').change(function() {
$('#result').empty();
$('#texture').html(
'<ul><li>' + $.map(data[this.value], function(e) {
return '<label><img src="'+e[3]+'"> <input type="radio" name="texture" data-price="'+e[2]+'" value="'+e[0]+'" /> '+e[1]+'</label>';
}).join('</li><li>') + '</li></ul>'
).on('change', 'input', function() {
$('#result').text(this.getAttribute('data-price')+' руб.')
})
});
});
</script>
</head>
<body>
<form autocomplete="off">
<p>Материал</p>
<div id="map">
<label><input type="radio" name="map" value="wood" /> Дерево</label>
<label><input type="radio" name="map" value="rock" /> Камень</label>
</div>
<p>Текстура</p>
<div id="texture"></div>
</form>
<p>Выбор</p>
<div id="result"></div>
</body>
</html>
Здесь нет построения списка выбирающего материал, хотя он тоже строится по полученным данным (это просто пример). Выбор в нем строит соответствующий список текстур материала, а выбор в нем отображает цену выбранной панели. И отображение выбрано не списком, а кнопками, так чтобы отображать и изображения текстур.
Сам объект представляет простой набор данных, но если данные не только для калькулятора и не пассивного, но и определяют выбор пользователя, который и просчитывается, и будет в конечном итоге отправлен серверу, то элементы выбора: списки, кнопки, флажки и т.п. обязательно должны иметь имена, значения которых также должны быть переданы сервером (ключ => значение), так как они должны быть связаны с SQL таблицами.
Последний раз редактировалось laimas, 04.02.2016 в 11:58.
|
|
04.02.2016, 13:48
|
|
Аспирант
|
|
Регистрация: 27.01.2016
Сообщений: 35
|
|
Спасибо огромное!!! Села разбираться  |
|
05.02.2016, 11:10
|
|
Аспирант
|
|
Регистрация: 27.01.2016
Сообщений: 35
|
|
Вот сижу разбираюсь, и вопрос за вопросом)))
Вот у меня такие значения массива steny к примеру:
'steny' : [['sm', 'Металл', 'sm1013', '1013.png', '1013.png'], ['sm', 'Металл', 'sm1015', '1015.png', '1015.png'], ['sp', 'Пластик', 'sp1013', '1013.png', '1013.png']],...
При таком выводе:
$('#steny').html(
'<div class="panel1"><h3 class="widget-title">Материал стен</h3><div class="radio">' + $.map(data[this.value], function(e) {
return '<input type="radio" name="steny" data-price="'+e[2]+'" value="'+e[0]+'" /><label> '+e[1]+'</label>';
}).join('') + '</div>'
Он выводит все привсе элементы массива. А подскажите как можно сделать выборку из элементов и вывести по одному разу название для радиокнопки - "Металл" и "Пластик" из массивов (sm и sp) без повторений?
Чтобы потом уже при клике на эту радиокнопку со значением, выстраивать рядом кнопки с цветом.... |
|
05.02.2016, 11:54
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Wall - еще понятно, стена, но если steny да еще moi_dlya_rashetov.... ну это нечто 
Не копируйте то, что я пишу, это пример к рассуждению, хотя UL->LI для представления будет удобен, но ведь необязательно как список, моно же как галерея изображений с выбором, да и выводить ее не обязательно так, тут большую роль будет играть структура данных, и для реального случая вряд ли такая будет. Если имя всех полей "steny" еще можно терпеть, но чтобы значение полей было "sm", "sp", это уже не годится. Расшифруйте для начала значение каждого из элементов массива:
'steny' - что это?
'sm', 'sp' - что это?
'Металл' - это понятно
'sm1013', 'sp1013' - что это?
'1013.png' - что это?
'1013.png' - почему дубль?
И разъяснить относительно базы, и если возможно структуру и связи данных, хотя есть предчувствие, что все в одну таблицу впихнуто, так? |
|
05.02.2016, 12:22
|
|
Аспирант
|
|
Регистрация: 27.01.2016
Сообщений: 35
|
|
steny - это вот
var data = {
'steny' : [['sm', 'Металл', 'sm1013', '1013.png', '1013.png'], ['sm', 'Металл', 'sm1015', '1015.png', '1015.png'], ['sp', 'Пластик', 'sp1013', '1013.png', '1013.png']],
при выводе потом используются так: <div id="steny"></div>
Ой ой, какой тут у меня кошмар))) Сейчас попробую объяснить.
Есть 3 вида стеновых панелей:
- металл
- пластик импортный
- пластик российский
У всех этих панелей одинаковый выбор цветов (1013,1015,1019... - это коды цветов). 1013.png - это картинка с цветом, sm1013.png - это картинка самих панелей определенного материала и цвета.
sm - стены металл; sp - стены пластик.
Так вот, я хочу, чтобы из объектов массива 'steny' : [['sm', 'Металл', 'sm1013', '1013.png', '1013.png'], ['sm', 'Металл', 'sm1015', '1015.png', '1015.png'], ['sp', 'Пластик', 'sp1013', '1013.png', '1013.png']] сначала выдернуть виды материаллов - для радиокнопок слева (их всего три получается, а элементов около 20), справа вывести цвета возможные (не важно как списком не списком, у меня просто ссылки были), а потом при нажатии на цвета, чтоб была выборка по массиву, чтоб совпал код цвета (например 1013) и материал (sp или sm) воооооот и открывалась соответствующая картинка (например sp1013.png)
Я понимаю, как глупо выглядят мои вопросы, но уж извините меня такую неуч  Я вся уже замаялась
Последний раз редактировалось Heny, 05.02.2016 в 12:26.
|
|
05.02.2016, 16:04
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Все не так. Начинается все с проектирования базы данных и если говорить даже только о стеновых панелях, то они есть: фасадные, для кухонь и ванных, металл, МДФ, ДВП, характеризуются по ширине, высоте, толщине, различных текстур, производитель, и т.д., и т.п., и конечно же имеют цену.
Если все это многообразие описывать так как вы приводите, то с расширением номенклатуры с такой базой и умереть не долго. Если все описывать в одной таблице, то в базе неизбежно будут дублирующие на все 99% друг друга записи. А должно быть:
Таблица материалов, в которую всегда легко добавить новый, и каждая запись в ней не под "sm" и "sp", а под уникальным идентификатором который формируется автоматически средствами самой базы. И это число, по которому SQL сделает выборку, отфильтрует или отсортирует данные гораздо проворнее, нежели копаясь с "sm", "sp" и еще бог весь чем.
Есть таблица в которой содержатся текстуры и также под уникальным идентификатором. Вот только если бы текстура была чисто ею, рисунок которой можно было бы смешать с любым цветом (это вообще-то сделать можно), тогда был бы резон хранить изображения текстуры отдельно, а какие-то картинки с цветом (не понятно какие и зачем). В противном случае выгоднее конечные изображения одной текстуры различных цветов, только разделяя их по плотности/тону от светлых до темных.
Цена панели вряд ли зависит от текстуры и цвета, а значит выгоднее имеющиеся цветовые наборы хранить не отдельной таблице, а сводной таблице полем типа ENUM, которое имея строковые значения во внутреннем представлении являются числами, и которые можно расположить от светлых до темных значений цвета.
Есть таблица производителей, брендов, которых можно группировать по стране производителя, и это также по уникальными идентификаторами. Могут быть и еще таблицы описывающие другие характеристики, например тип соединения и прочее.
И есть сводная таблица, в которой собственно перечислены идентификаторы таблиц характеристик определяя таким образом какие наборы панелей имеются в наличии. В этой таблице указывается цена панели, которая может зависеть от размеров, которые также можно описывать полем типа ENUM.
Выбор пользователя при этом будет возвращать значения полей формы как идентификаторы наборов и под именами/ключами, которые указывают на поле SQL таблицы, которым принадлежат эти идентификаторы. А это значит, что данные на клиенте должны представлять собой объект не с массивами (как в примере, что вы пытаетесь использовать), а с объектами, или в случае последовательного получения различных характеристик панелей, каждый ответ сервера, это объект на клиенте, из которого строится очередной список.
Даже в случае небольшого объема данных с небольшим набором характеристик, что еще как то можно описать одной таблицей, в которой выгодно будет использование ENUM, возвращение только одной характеристики описываемой таким полем, это объект, где внутреннее представление (число) это свойство, а текст его значение.
Если вам кажется, что это сложно и слишком громоздко, а проще "sm", "sp" и так мне удобнее ибо легче запомнить, то это заблуждение. Одно понятие "человеческий фактор" может превратить эту кажущуюся простоту в причину мучений.
И только тогда, когда будет разработана база данных отвечающая всем задачам, которые требуются для их обслуживания и запросам клиентов, можно решать вопросы интерфейса для клиентов и административного управления.
Вот типа такого.
|
|
10.02.2016, 08:25
|
|
Аспирант
|
|
Регистрация: 27.01.2016
Сообщений: 35
|
|
Сижу ковыряю, ковыряю. И снова какая-то нелепая ошибка. Может ткнете носом?
<script type="text/javascript">
var btn = document.querySelectorAll('.btn'),
el = document.querySelectorAll('.el');
Array.prototype.forEach.call(btn, function(curr){
curr.addEventListener('click', function() {
Array.prototype.forEach.call(el, function(curr){
curr.classList.remove('active');
});
if (document.getElementById('1').onclick = true) {
document.getElementById('steny').classList.add('active');
};
if (document.getElementById('2').onclick = true) {
document.getElementById('pol').classList.add('active');
};
return false;
}, false);
});
</script>
В html так:
<div class="variant">
<div class="menu3d">
<div class="inform">
<ul>
<li id="1" class="btn"><a href="">Стены</a></li>
<li id="2" class="btn"><a href="">Пол</a></li>
</ul>
</div>
</div>
<!--Конец Меню-->
<!--Начало формы -->
<div class="3d-panel">
<!--Панель выбора стен-->
<div id="steny" class="el active">
</div>
<!-- Конец панели выбора стен-->
<!--Панель выбора пола-->
<div id="pol" class="el">
</div>
<!-- Конец панели выбора пола-->
</div>
Изначально <div id="steny"> c class="el active", то есть с display=block.
При нажатии на ссылки "стены"/"пол" на секунду появляется панель с полом. А должно быть, чтобы при нажатии на "пол" - "стены" исчезали (удалялся класс active), а полу он добавлялся --> Кароче что-то не то творится(
Последний раз редактировалось Heny, 10.02.2016 в 09:04.
|
|
10.02.2016, 11:39
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
На форуме с завидным постоянством вопросы по раскрыть/свернуть панель/панели, и много готового. Посмотрите готовое решение, как это правильно делается, без явных указаний на идентификаторы объектов, иначе добавить еще одну панель - переписывать код. Да и id начинающиеся с цифры это вообще-то невалидно.
|
|
|
|
