JQUERY - Определенные значения из тех же элементов класса - PullRequest
Новая
       27

JQUERY - Определенные значения из тех же элементов класса

0 голосов
/ 28 мая 2011

РЕДАКТИРОВАТЬ: я очень устал прошлой ночью и неправильно написал свой jQuery, ".readMore" всегда является триггером для соответствующей анимации div.Я прошу прощения.

Привет всем,

Я хотел бы извлечь конкретную информацию из элементов с тем же классом.У меня есть несколько div, которые содержат различное количество текста, поэтому их высота также варьируется.Тем не менее, я установил класс, связанный с этими div, на высоту 200 пикселей.В нижней части каждого div у меня есть абсолютно позиционированный якорь, который позволяет читателю расширять (анимировать) div до его автоматической / естественной высоты.

Что я хотел бы сделать, это выяснить'auto' высота div с тем же классом, сохранить его, а затем вызвать его позже, когда щелкнет привязка соответствующего div.До сих пор я продолжаю получать только одно значение или никакого значения, в то время как я хотел бы, чтобы все они.

Я недавно использовал .each (), но безрезультатно.Кажется, что настоящая проблема заключается в анимации div, в противном случае это не проблема;просто нужно использовать .css (), чтобы установить высоту на авто.Это было бы намного проще, если бы вы могли оживить свой рост до авто.Я надеюсь, что я объясняю себя правильно.В любом случае, вот мой код.

HTML 

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

CSS 

div.stretch {height:auto; width:100%; overflow:hidden; position:relative}
a.readMore {position:absolute; left:0; bottom:0;}

JQuery 

$divheight = //stored height of divs
$allheight = $divheight + 100; //extra space to clear the anchor
$(".h200").height(200);
$(".stretch").addClass("h200"); //change height later, to be able to refer to automatic/natural height

$(".readmore").toggle(
    function(){
        $(this).parent('div').animate({height:$allheight}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:"200px"}, 250);
        $(".readMore").text("Read More");
    }
)

Спасибо заранее, я действительноспасибо, что даже взглянул.

Ответы [ 2 ]

1 голос
/ 28 мая 2011

попробуйте это: 

$hiddenheight=200;
$extraspace=100;

$(".stretch")
.each(function(){
    $(this).data('actualheight', $(this).outerHeight()+$extraspace).css('height', $hiddenheight+'px');    //outerHeight for including padding+margin+border, if any
})
.toggle(
    function(){
        $(this).animate({height: $(this).data('actualheight')+'px'}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:$hiddenheight+"px"}, 250);
        $(".readMore").text("Read More");
    }
)

отрегулируйте значения высоты в соответствии с потребностями.

0 голосов
/ 28 мая 2011

$. Height () вернет фактическую высоту вашего элемента.Сохраните его, используйте повторно при вызове hide.

Вот так: 

$(".stretch").toggle(
    function(){
        $(this).data('oh', $(this).height());
        $(this).animate({height: 200}, 750);
    },
    function(){
        $(this).animate({height: $(this).data('oh')}, 250);
        $(this).data('oh', null);
    }
)
...