Question

这就是我想要实现的目标：我有一个在div内旋转的图像列表（淡入，淡出效果）在每次旋转中，有一个显示，其余的都被隐藏（显示：无）

我正在尝试创建一个“调整大小”事件，它将始终检查现有图像的高度（序列中唯一显示的图像）并将此高度分配给它的主容器（在我的情况下：UL）

这是我的HTML：

<ul id="output">
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="images/sample1.jpg">

    </li>
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="images/sample2.jpg">
    </li>
    <li>
    <div class="description">Lorem Ipsum</div>
        <img src="/images/sample3.jpg">
    </li>
</ul>

和我的JS：

jQuery(window).resize(function() {

    slide_img = jQuery.find("ul#output li img");
    slide_img_height = jQuery(slide_img).height();


    if(jQuery(slide_img).css("display") != "none"){
        jQuery("ul#output").height(slide_img_height);
    }



});

它不起作用。它还获得序列中“隐藏”图像的高度并显示其高度（等于0）

如何仅使用显示块仅拉出图像并获得高度，然后将其分配给主UL？

由于

Answer 1

让我确保理解你的问题： 1.）您有一个容器可容纳多个图像，一次只能看到其中一个图像。 2.）您想要更改容器的大小以适合当前显示的图像。 3.）您是否也尝试将高度（以像素为单位）显示为文本元素？

如果你只想完成前两个，你可以将图像嵌套在一个而不是像：

<div id='output'>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample1.jpg' />
        </div>
    </div>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample2.jpg' />
        </div>
    </div>
    <div class='container'>
        <div class='description'>Lorem ipsum</div>
        <div class='image>
            <img src='images/sample3.jpg' />
        </div>
    </div>
</div>

如果这样做，“输出”div的高度将始终是唯一显示图像的高度。如果需要显示实际高度的值，可以使用：

var outputHeight = $('#output').height();

Answer 2

由于我无法在评论中添加足够的代码来回答您的后续问题，因此这里是：

如果您需要保留原始结构，请尝试以下操作：

<ul id="output">
    <li class="container active">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample1.jpg" />
    </li>
    <li class="container">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample2.jpg" />
    </li>
    <li class="container">
        <div class="description">Lorem Ipsum</div>
        <img src="images/sample3.jpg" />
    </li>
</ul>

然后你可以选择隐藏或可见的<li>来像这样的CSS：

.contaner {
    display: none;
}
.active {
    display: inline;
}

像这样，当您设置<li>时，整个display: none;都会被移除，只有可见的会占用<ul>中的空格。这样，您的<ul>只会与当前显示的图片一样高。

希望能回答你的问题。

Answer 3

所以最终，这就是我想出来的，它完美无缺：

jQuery(window).resize(function() {

    // variables presenting the LI, IMG and th eheigt of the img
    slide_li = jQuery("ul#output li").css('display','list-item');
    slide_img = jQuery(slide_li).find('img');
    slide_img_height = jQuery(slide_img).height();

    jQuery("ul#output").height(slide_img_height);

});

这样我就能找到唯一一个显示＆＃34; list-item＆＃34; （我知道它很奇怪，但这就是滑块的工作方式，我没有构建它）然后，获取图像高度并将其分配给我的情况下的主容器：

ul#output

感谢@anson尽力提供帮助感谢

使用显示块检查图像的高度

3 个答案: