父 CSS (jQuery)

Question

这里有

和 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。

尝试编写一个脚本，当单击

时，该脚本将更改

的高度。

高度应取自 dd img 的height 属性。

尝试过这个，但没有运气：

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

谢谢。

Answer 1

更新：

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

Answer 2

在您的 HTML 中，没有 id 为 posters 的元素，尽管您的选择器正在搜索该元素。可能性很大，但也许这就是问题所在？代码的其余部分看起来完全没有问题。

Answer 3

您始终可以使用 jQuery 函数 .attr('height') >.height()。

除此之外，它应该适当调整你的 padding-top。

jsbin 预览

Answer 4

尽管您的语法是正确的，但尝试设置属性也可以这样设置。
.css（属性，值）；

示例

$(this).parent().css("padding-top", parent_padding);

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

参考和更多示例：此处

Answer 5

我猜测 a 元素的默认行为是触发并重新加载页面。

父级应该仍然可以工作，因为事件位于

上。

试试这个：

$("#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});
}); ​