Родительский CSS (jQuery) - PullRequest
       39

Родительский CSS (jQuery)

4 голосов
/ 28 апреля 2010

Есть <dl> с padding-top

<dl id="posters" style="padding-top: 150px;">
<dt class="active">text</dt>
<dd class="active"><a href="#"><img width="150" height="150" src="..." /></a></dd>
<dt>text 2</dt>
<dd><a href="#"><img width="150" height="250" src="..." /></a></dd>
<dt>text 3</dt>
<dd><a href="#"><img width="150" height="350" src="..." /></a></dd>
</dl>

Разница между изображениями - height.

Попытка написать сценарий , который изменит height <dl> при нажатии <dd>.

Высота должна быть взята из атрибута height dd img.

Пробовал это, но не повезло:

$("#posters dt").click(function(){
        var parent_padding = $("dd").find("img").height();
        $("dd").closest("dl").css("padding-top",parent_padding);
    }).andSelf().addClass("active")});

Спасибо.

Ответы [ 5 ]

8 голосов
/ 28 апреля 2010

Я предполагаю, что по умолчанию элемент a запускает и перезагружает страницу.

Родитель должен все еще работать, потому что событие на <dd>.

* 1006.* Попробуйте это:
$("#posters dd").click(function(e){
    e.preventDefault();
    var parent_padding = $(this).find("img").attr("height");
    $(this).parent().css({"padding-top":parent_padding});
});

РЕДАКТИРОВАТЬ:

Глядя на ваш код, он сильно отличается от того, что вы отправили.

Есть несколько проблем.

Я не думаю, что end() используется должным образом (хотя и не уверен).

prev() не должен принимать функцию в качестве аргумента.

После этого сдался.

Прикрепленный код по предоставленной ссылке:

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

$("dt").click(function(){
    $(this).siblings()
             .removeClass("active")
             .end()
        .prev(function(){
                    $("dd").parent()
                        .css({'padding-top':$(this).find('img').height()});
    }).andSelf().addClass("active")});
    $("#posters dt").fadeTo("fast",.7);$("#posters dt").hover(function(){$(this).fadeTo("fast",.9)},function(){$(this).fadeTo("fast",.7)});
                                                                         $("#posters .toggle a").click(function(){$(this).toggleClass('active');$("#posters dt").toggle();return false});
  }); 

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


ЧАСТИЧНОЕ РЕШЕНИЕ:

Это начало решения.

Вы назначали события внутри обработчика событий щелчка.Это не правильно, поэтому я просто удалил их.Сейчас я рассмотрю их как отдельную проблему.

Это (насколько я могу судить) будет делать то, что вы хотите с отступом.Обратите внимание, что ваше событие клика происходит на dt, а не на dd, поскольку именно так оно и было в вашем коде.

Если событие должно быть на dd, измените егона #('posters dd').click(... и избавиться от next() на следующей строке вниз.

$("#posters dt").click(function(){
    var padding = $(this).next().find('img').attr('height');
    $(this)
        .addClass('active')
        .siblings()
        .removeClass("active");
    $(this).parent()
        .css({'padding-top':padding});
}); ​
5 голосов
/ 28 апреля 2010

Вместо получения .attr('height') изображения вы всегда можете просто использовать функцию jQuery .height().

Кроме этого, он должен соответствующим образом отрегулировать верхнюю часть вашего отступа.

jsbin preview

3 голосов
/ 28 апреля 2010

Хотя ваш синтаксис правильный, попытка установить свойство также может быть настроена так. .css (свойство, значение);

* ** 1003 тысяча два * Пример
$(this).parent().css("padding-top", parent_padding);

$(this).css("color","red");

Ссылка и другие примеры: здесь

1 голос
/ 28 апреля 2010

В вашем HTML нет элемента с идентификатором posters, хотя это то, что ищет ваш селектор. Длинный выстрел, но может быть в этом проблема? Остальная часть кода выглядит отлично.

1 голос
/ 28 апреля 2010

Обновлен:

$("#posters dd").click(function(){
    var parent_padding = $(this).find("img").height();
    $(this).closest("dl").css("padding-top",parent_padding);
});
...