Задача состоит в том, чтобы все блоки одного типа имели равную высоту.
Есть два правильных способа сделать блоки одинаковой высоты:
Метка: jquery
Для решения задачи сортировки уже давно применяют JavaScript, вместо того, чтобы заново генерировать код перезагружая страницу.
Задача состоит в том, чтобы сортировать блоки в алфавитном порядке, либо по числам, в обоих направлениях – по убыванию и возрастанию. При этом необходимо, чтобы код корректно работал во всех браузерах, включая Internet Explorer и Safari. Предполагается, что будет использоваться не чистый JavaScript, а именно сортировка jQuery.
Рассмотрим следующую задачу: при клике на кнопку текст из .block_1 должен попадать в .block_2, а при изменении .block_2 в .block_3 должна появляться информация вида: было -> стало.
Пусть HTML данной задачи выглядит следующим образом:
<div class="block_1">Текст</div> <div class="block_2"></div> <div class="block_3"></div> <button>OK</button>
Решение
Для того, что бы записать в .block_2 текст из .block_1 надо отследить событие click, но с .block_3 так не получится, ведь задача состоит в том, чтобы изменять содержимое .block_3 при изменении содержимого .block_2. В данном случае мы не можем отслеживать событие change, так как сам элемент не меняется, меняется его содержимое, поэтому необходимо использовать DOMSubtreeModified:
// переменная - счетчик, для наглядности
var i = 0;
// записываем в переменную содержимое блока 1 + счетчик var stalo = jQuery (".block_1").text() + ' ( ' + i + ' )'; // так как изначально блок 2 ничего не содержит, переменная пустая
var bilo = '';
// отслеживаем клик по кнопке jQuery('button').click(function(){
//вставляем в блок содержимое из переменной jQuery (".block_2").text( stalo );
// увеличиваем счетчик на 1 i++;
// изменяем значение переменной stalo = jQuery (".block_1").text() + ' ( ' + i + ' )';
// записываем в переменную содержимое блока 2 bilo = jQuery(".block_2").text(); });
// отслеживаем изменение содержимого блока 2 jQuery(".block_2").bind( 'DOMSubtreeModified',function(){
// вставляем в блок значения переменных jQuery(".block_3").text( bilo + ' -> ' + stalo ); });
Суть задачи: Динамически создавать по два поля, например для добавления каких либо характеристик. Первое поле будет содержать название характеристики, второе ее значение.
Например: Ширина | 20
HTML код, который необходимо написать перед добавлением полей, реализует таблицу, в которую будут вставляться новые строки. В примере, для того, что бы не задумываться о стилях используется Bootstrap.
HTML таблицы, в которую будут вставлены динамически созданные поля:
<table class="table information_json"> <tr> <th>Название поля</th> <th>Значение поля</th> <th></th> </tr> <tr class="information_json_plus"> <td></td> <td></td> <td><span class="btn btn-success plus pull-right">+</span></td> </tr> </table>
JavaScript, который формирует строку для таблицы, содержащую поля:
// формируем новые поля
jQuery('.plus').click(function(){
jQuery('.information_json_plus').before(
'<tr>' +
'<td><input type="text" class="form-control" name="information_json_name[]" placeholder="Название поля"></td>' +
'<td><input type="text" class="form-control" name="information_json_val[]" placeholder="Значение поля"></td>' +
'<td><span class="btn btn-danger minus pull-right">–</span></td>' +
'</tr>'
);
});
// on - так как элемент динамически создан и обычный обработчик с ним не работает
jQuery(document).on('click', '.minus', function(){
jQuery( this ).closest( 'tr' ).remove(); // удаление строки с полями
});
Надо заметить, что данный пример создает столько переменных, сколько будет полей. Чтобы сократить количество переменных нужно в качестве id для input‘ов писать имена вида information_json_name[] и information_json_val[] соответственно. В этом случае на выходе получится 2 массива, которые можно хранить в базе данных в более компактном и удобном виде, нежели несколько разных переменных.
Заметьте, что использование Bootstrap в данном примере не обязательно, так как служит лишь для того, что бы визуализировать форму с полями.
Ниже приведены стили, которые можно использовать, если вы не подключали Bootstrap
.information_json, .information_json * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
background-color: transparent;
border-spacing: 0;
border-collapse: collapse;
}
.table td:last-child {width:10px;}
.pull-right {float: left;}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}