Изменить высоту в JQuery только работает один раз - PullRequest
Новая
       12

Изменить высоту в JQuery только работает один раз

0 голосов
/ 17 февраля 2009

У меня есть набор списков товаров, у каждого из которых есть ссылка под ними с событием click, при котором он переходит в родительский класс, находит класс «surf_prod1» ниже и slideToggles его. Где функция, которая проверяет все div с классом "surf_prod" и получает наибольшую innerHeight, которая передается обратно и используется как высота для всех div с классом "surf_prod".

Это работает плавники для первого клика, однако последующие не имеют никакого эффекта, и кажется, что действует только начальная высота, не уверен, что это связано с какой-либо формой кэширования?

Надеюсь, кто-то может помочь.

Вот мой HTML: 

<div class="surf_prod">
<img height="300" border="0" alt="7'2" - Egg" src="product_images/takayama_egg_7_2_egg_l0242_front.jpg"/><br/>
<span style="height: 35px;"><b id="review1615">7'2" - Egg</b></span><br/>
<div valign="top" class="surf_prod1">
    <p style="margin-bottom: 2px;"><b>N : </b>16 1/4</p>
    <p style="margin-bottom: 2px;"><b>M : </b>21 1/4</p>
    <p style="margin-bottom: 2px;"><b>T : </b>14 3/4</p>
    <p style="margin-bottom: 2px;"><b>Th : </b>2 3/8</p>
</div>
<span style="margin: 0px;"><b>FINS</b></span><br/>
<div class="surf_prod1">
    <p><b>Centre : </b>US 8" TAK 4.5</p>
    <p><b>Side : </b>FCS M5</p>
</div>
    <div class="review_box">
    <a class="review_link" href="#review1615"><b style="cursor: pointer; text-decoration: underline; color: rgb(204, 0, 0);" title="Click For Review">Board Review</b></a>
    <div style="text-align: left; display: none;" class="surf_prod1 review_body">If you're not quite ready to "rip and shred" on a short board, nor are you apt to "cruise" on a long board, then the Hawaiian Pro Designs Egg is the perfect solution. This model is an "eggy" looking shape that allows the rider to trim high on the wave in the middle of the board or race down the line on the tail, whichever the rider prefers. This board is also a perfect beginners board because of the overall forgiving shape that allows for a variety of mistakes without loss of speed or manoeuvrability.<br/><a href="http://www.surfcom.co.uk/app/content_prod/5/1615"><b>More</b></a></div>
</div>
</div>

и мой JavaScript: 

function equalHeight(group) {
var tallest = 0;
group.each(function() {
    thisHeight = $(this).innerHeight(true);
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
  });
  return tallest;
}

$(document).ready(function(){
$(".review_body").slideUp("fast");

$(".review_link").click(function(ev){
    ev.preventDefault();

    var link = $(this).attr('href');

    //Get the review container to be able to manipulate the children of it
    $(this).parent(".review_box").find(".surf_prod1").slideToggle("fast", function(){

         var surf_prod_height = equalHeight($("div.surf_prod"));
        $("div.surf_prod").height(surf_prod_height);

        document.location = link;
    });

});

});

Пример здесь .

1 Ответ

5 голосов
/ 18 февраля 2009

Как только вы установите высоту, она больше не зависит от содержимого, поэтому во второй раз вы получите одинаковую высоту для всех элементов div - высоту, которую вы установили в первый раз.

Попробуйте установить высоту «авто», прежде чем найдете нужную высоту: 

$("div.surf_prod").height("auto");
var surf_prod_height = equalHeight($("div.surf_prod"));
$("div.surf_prod").height(surf_prod_height);
...