logo标签列表

父级CSS（jQuery）

jqueryheightparent
4

有一个带有 padding-top 的 <dl>

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

图片之间的区别 - 高度。

试图编写一段脚本，当点击<dd>时，将更改<dl>的高度。

高度应从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")});

感谢您。
看起来对我来说是可以工作的，填充已经改变。你所说的“不起作用”是什么意思？ - Kobi
运行良好。这是在 jsFiddle 上的链接：http://jsfiddle.net/tGT7F/ 你确定点击事件被触发了吗？ - user113716
修正了主题。抱歉，忘记了{{link1：<img />}}。 - Happy
a 的默认行为可能会触发并重新加载页面。parent() 不应该是问题，因为事件在 <dd> 元素上。如果问题确实如此，请参见下面的答案以进行更正。 - user113716
@David Murdoch，尝试了一下，没有起作用。我的代码似乎有些初始错误http://jsbin.com/izupe3 - Happy
你实际的代码与你在这里发布的不同。下次请发布你正在使用的实际代码。请查看我的回答。 - user113716
5个回答
8

我猜测标签的默认行为是触发并重新加载页面。

父元素仍然可以工作，因为事件在<dd>上。

尝试这样做：

$("#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

您可以始终使用jQuery函数.height()，而不是获取图像的.attr('height')。

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

jsbin预览

@gnarf - 没有冒犯的意思，但使用 height() 从来都不是解决方案，因为 height 属性已经被明确设置了，而且 OP 仍然存在问题。 - user113716
3
虽然你的语法是正确的，但是设置属性也可以像这样设置。.css(property, value);
例子：
$(this).parent().css("padding-top", parent_padding);

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

参考和更多示例：点击这里。
1
css({"padding-top":parent_padding}) 是有效的，它可以接受多个属性：css({"padding-top":parent_padding,color:'red'}) - Kobi
无法工作。通过Firebug观察，似乎它无法捕获父标签-<dl>。 - Happy
在哪里可以找到id为posters的<dd>元素？ - Gabe
1

更新：

$("#posters dd").click(function(){
    var parent_padding = $(this).find("img").height();
    $(this).closest("dl").css("padding-top",parent_padding);
});
如果你谴责我的回答，那就用完全相同的方式回答。你非常敏锐，首领。 - Gabe
@gmcalab。抱歉，不行。我将.attr("height")更改为.height()。 - David Murdoch
不是在说那一行，伙计。 - Gabe
修正了主题，它应该捕获“dl parent”，而不是实际的“parent”。 - Happy
@gmcaleb：你曾建议使用 ("property":"value"} 会导致问题，但实际上并没有。我更改答案的原因是当 property, value 参数正常工作时，使用 {} 语法是毫无意义的。 - David Murdoch
@D M - 实际上，我纠正了自己的话，说语法是正确的。但我也提供了另一种property,value方法。我知道这种方法很好用，这就是我最初建议尝试它的原因。 - Gabe
1

在你的HTML中没有带有id posters 的元素，尽管这是你选择器正在搜索的。可能是这个问题吗？代码的其余部分看起来完全正常。

有海报，忘了提一下。谢谢。 - Happy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接