Промяна на свойствата на елементи с JQuery

От 2 часа се боря с проблем с JQuery и не мога да получа нищо.

Създавам уебсайт с div слайдове, нали? Така че имате основния div, наречен #content, а вътре имам друг div, наречен #slides. Но аз искам 4 от тях, така че отново вътре имам 4 секции.

Какъв е проблемът? Всеки раздел има своя собствена височина, така че височината на #slides е най-високата от тях и това прави долния колонтитул да изглежда много нисък с много празно пространство. Така че се опитах да променя височината на #slides с JQuery всеки път, когато промените своя раздел, за да запазя същото поле за долния колонтитул и винаги да има една и съща част от празното пространство, но не знам как мога да го направя.

Така че търсих doc и знам, че трябва да използвам метода animate(), като този

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

Просто трябва да добавя ново css свойство, което да качи текущата височина. Но как мога да го направя? Не знам никаква идея от JQuery.

Аз съм новак, такива красиви неща са нови за мен и се опитвам да ги открия сам, но в някои моменти като този не знам как да го поправя и да продължа...

Благодаря!

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


jquery elements
person albertoblaz    schedule 17.09.2011    source източник
comment
Имате ли множество обекти с еднакъв идентификатор в различните секции? Можете да имате само един обект с даден ID във всяка една уеб страница.   -  person jfriend00    schedule 17.09.2011
comment
Не, имам само 1 div контейнер, наречен #slides, и няколко секции, наречени .slide, така че това не е проблемът. Както и да е, благодаря.   -  person albertoblaz    schedule 17.09.2011

Отговори (2)


arrow_upward
1
arrow_downward

Имате нужда от начин да идентифицирате кой от вашите слайдове е активният в момента.

Във вашата редакция вашият вътрешен израз $('.slide').height() трябва да бъде прецизиран, за да съответства само на този, който искате. Това е така, защото $('.slide') съответства на всички ваши слайдове. (И по този начин връща само височината на първия.)

Но ако сте имали "активен" или "текущ" клас на текущо видимия слайд или ако сте знаели индекса/номера на показвания слайд, можете да прецизирате това. Например $('.slide.current') или $('.slide').eq(idx)

Може би, ако можете да разработите по-подробно кода, който изпълнявате, когато „натиснете бутона“, който споменахте, бихме могли да разгледаме добавянето на някои допълнителни неща там, за да помогнем с тази идентификация, която споменах. След това можете да добавите промяна на височината към същия метод на анимация, който вече извиквате за лявото поле.

Късмет!

person Funka    schedule 17.09.2011

arrow_upward
0
arrow_downward

Добре, вярвам, че най-накрая го реших. Опитах се да поставя някои идентификатори, за да идентифицирам секцията (.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