24.07.2015, 03:00
|
Аспирант
|
|
Регистрация: 09.03.2013
Сообщений: 36
|
|
Помощь в сокращении кода
Доброй ночи всем =)
Делалось по примеру на один блок, но теперь понадобилось несколько блоков на одной странице.
Можно ли как то сократить данный код и возможно ли унифицировать окончания -1 -2 -3 в бесконечность ???
$(window).load(function(){
$(document).ready(function(){
$('#block-price-1').on('click',function(){
if($(this).data('click')==0){
$('#block-price-1 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-1 .hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-2').on('click',function(){
if($(this).data('click')==0){
$('#block-price-2 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-2 .hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-3').on('click',function(){
if($(this).data('click')==0){
$('#block-price-3 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-3 .hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-4').on('click',function(){
if($(this).data('click')==0){
$('#block-price-4 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-4 .hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
});
});
Последний раз редактировалось stem, 24.07.2015 в 03:02.
|
|
24.07.2015, 04:35
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от stem
|
$(window).load(function(){
$(document).ready(function(){
|
Это зачем такое и многократно повторяющееся?
$(document).ready(function() { установка обработчиков }) или $(function() { установка обработчиков })
$(function() {
var o = $('[id|=block-price]').on('click',function(){
var d = +o.data('click') ^ 1; //смотря что за data, если атрибут data-click, то +, иначе не надо и по умолчанию устновить надоть
o.find('.hide-block').css({maxHeight, 700 * d})
.end() //к родителю
.data({click: d}); //смотря что за data, если атрибут data-click, то так его нельзя заменить
}).data({click: 0}); //если речь не об атрибуте, устанавливаем значение по умолчанию
});
Случайно не о "развернуть" речь, может быть этого достаточно будет?
Последний раз редактировалось laimas, 25.07.2015 в 06:53.
|
|
27.07.2015, 12:58
|
Аспирант
|
|
Регистрация: 09.03.2013
Сообщений: 36
|
|
Попробовал, не работает, у меня несколько элементов на странице + есть элемент с другими параметрами для меню (разворачивается в бок). В JS не силен, нашел код и чуток допилил его под свои нужны на сколько хватило знаний, поэтому для нескольких элементов продублировал код. Когда удалил $(window).load(function(){ }); везде и оставил только один, то так же все перестало работать.
Вот полный код:
<script type="text/javascript">
$(window).load(function(){
$(document).ready(function(){
$('#menu-ico').on('click',function(){
if($(this).data('click')==0){
$('#menu-ico').css('position','absolute');
$('#fixmenu').css('width','100%');
$(this).data('click','1');
}
else{
$('#fixmenu').css('width','50px');
$('#menu-ico').css('position','relative');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-1').on('click',function(){
if($(this).data('click')==0){
$('#block-price-1 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-1 .hide-block').css('max-height','1000px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-2').on('click',function(){
if($(this).data('click')==0){
$('#block-price-2 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-2 .hide-block').css('max-height','1000px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-3').on('click',function(){
if($(this).data('click')==0){
$('#block-price-3 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-3 .hide-block').css('max-height','1000px');
$(this).data('click','0');
}
});
});
});
$(window).load(function(){
$(document).ready(function(){
$('#block-price-4').on('click',function(){
if($(this).data('click')==0){
$('#block-price-4 .hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$('#block-price-4 .hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
});
});
</script>
|
|
27.07.2015, 13:12
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от stem
|
Когда удалил $(window).load(function(){ }); везде и оставил только один, то так же все перестало работать.
|
Вы не понимаете что это такое, а посему и клонируете... Вместо этого кода лучше приведите html исходный, в котором и нужно установит обработчики, тогда и понятно станет чего у вас там не работает. А ваш JS... в общем так писать нельзя.
|
|
27.07.2015, 14:55
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
laimas,
Возможно старый JQ
$(document).ready(function(){
$('*[id^="block-price-"]').on('click',function(){
if($(this).data('click')==0){
$(this).find('.hide-block').css('max-height','0');
$(this).data('click','1');
}
else{
$(this).find('.hide-block').css('max-height','700px');
$(this).data('click','0');
}
});
Последний раз редактировалось Deff, 27.07.2015 в 15:04.
|
|
27.07.2015, 16:06
|
Аспирант
|
|
Регистрация: 09.03.2013
Сообщений: 36
|
|
jq версии 2.1.0 подключается
|
|
27.07.2015, 16:09
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
stem
HTML-код свой покажите вместо JS, вы что-то делаете не так, а уж с JS и подавно.
|
|
27.07.2015, 16:10
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от Deff
|
Возможно старый JQ
|
Старый это какой? Я не знаю jQ, который бы требовал поступать так как у вас написано. )
|
|
27.07.2015, 16:12
|
Аспирант
|
|
Регистрация: 09.03.2013
Сообщений: 36
|
|
Сообщение от laimas
|
Вы не понимаете что это такое, а посему и клонируете... Вместо этого кода лучше приведите html исходный, в котором и нужно установит обработчики, тогда и понятно станет чего у вас там не работает. А ваш JS... в общем так писать нельзя.
|
я об этом и написал что в JS не понимаю, делалось все чисто интуитивно.
Вот код фиксированного меню, которое свернуто изначально в кнопку и раскрывается на всю ширину (слева направо) при нажатии.
<div id="fixmenu"><div class="sub-main-menu"><button id="menu-ico" data-click="0"></button>Тут пункты меню</div></div>
Это код блоков:
<div data-click="1" class="border-price-block" id="block-price-1">
Тут постоянно видимый контент
<div class="hide-block"><hr>
Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
</div>
</div>
|
|
27.07.2015, 16:16
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
stem,
Есть пробная Инет-страница с Вашей проблемой ?
|
|
|
|