Изменение свойств элементов с помощью JQuery

Уже 2 часа бьюсь с проблемой с JQuery и ничего не получается.

Я создаю веб-сайт с div-слайдами, хорошо? Итак, у вас есть основной div с именем #content, а внутри у меня есть еще один div с названием #slides. Но я хочу их 4, так что еще раз, внутри у меня 4 секции.

В чем проблема? Каждый раздел имеет свою высоту, поэтому высота #slides является самой высокой из них, и это делает нижний колонтитул очень низким с большим количеством пустого пространства. Поэтому я попытался изменить высоту #slides с помощью JQuery каждый раз, когда вы меняете свой раздел, чтобы сохранить одинаковое поле для нижнего колонтитула и всегда иметь одну и ту же часть пустого пространства, но я не знаю, как я могу это сделать.

Итак, я искал документ, и я знаю, что должен использовать метод animate(), например

$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

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

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

Спасибо!

редактировать: в первый раз, прежде чем кто-либо сможет увидеть информацию, вы можете установить высоту в качестве первого слайда. Это довольно просто с помощью $('#slides').height($('.slide').height()); Моя проблема заключается в обновлении высоты до новой секции, которую вы будете видеть каждый раз, когда нажимаете кнопку.


person albertoblaz    schedule 17.09.2011    source источник
comment
У вас есть несколько объектов с одинаковым идентификатором в разных разделах? Вы можете иметь только один объект с заданным идентификатором на любой отдельной веб-странице.   -  person jfriend00    schedule 17.09.2011
comment
Нет, у меня есть только 1 контейнер div с именем #slides и несколько разделов с именем .slide, так что это не проблема. В любом случае, спасибо.   -  person albertoblaz    schedule 17.09.2011


Ответы (2)


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

В вашем редактировании ваше внутреннее выражение $('.slide').height() должно быть уточнено, чтобы соответствовать только тому, которое вы хотите. Это связано с тем, что $('.slide') соответствует всем вашим слайдам. (И, таким образом, возвращает только высоту первого.)

Но если у вас есть «активный» или «текущий» класс на видимом в данный момент слайде или если вы знаете индекс/номер отображаемого слайда, вы можете уточнить это. Например, $('.slide.current') или $('.slide').eq(idx)

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

Удачи!

person Funka    schedule 17.09.2011

ОК, я считаю, что наконец решил это. Я попытался указать некоторые идентификаторы для идентификации раздела (.slide), но PHP-код, который у меня есть, динамически генерирует разделы, поэтому я не знаю, как я могу указать разные идентификаторы таким образом.

По этой причине я попробовал более легкую и другую идею. В сценарии JS есть предыдущий цикл, который получает ширину всех .slide и вычисляет общую ширину, чтобы позже назначить общую ширину контейнеру #slides. Я сделал то же самое для высоты

var heights = new Array();

/* Loop to save every height */    
$('#slides .slide').each(function(i) {
     heights[i] = $(this).height();
}

/* Setting the #slides height to the first .slide height */
$('#slides').height($('.slide').height());

/* And finally, the animation when someone "push the button" */
$('#menu ul li a').click(function(e,keepScroll) { 
     var pos = $(this).parent().prevAll('.menuItem').length;
     $('#slides').stop().animate( {height:heights[pos]+'px'}, 450);
}

Спасибо за все. Я такой большой нуб, но я обнаружил, что люблю веб-дизайн ^^

person albertoblaz    schedule 17.09.2011