获取下一个或上一个隐藏元素的高度，以设置父元素的高度.jquery.

Get the height of the next or previous hidden element to set height of the parent element. jquery

本文关键字：高度 元素 设置 jquery 下一个 隐藏 获取 上一个      更新时间：2023-09-26

我有一个ul，其中包含隐藏的图像，然后使用绝对定位加载到轮播中。

这些图像的高度在桌面视图中受到限制，因此我可以控制父元素的高度，因为ul下方有一个小的切换菜单。

当我切换到移动设备时，我正在使用媒体查询将图像的宽度设置为 100% 并重置高度。这意味着每次滑动下一张或上一张幻灯片时，都必须计算切换菜单的位置，因为图像高度会发生变化。

我目前有一个函数，它返回当前幻灯片的高度并使用它来设置元素的高度，但是如果用户向右滑动，我需要这个函数来计算下一个图像的高度，或者上一个图像向左滑动。

这是我的代码： 

// check height of slider 
var chSliderHeight = function(){ 
    var slider          = $('.slider');
    var sliderImg       = slider.find('li:visible img');
    var sliderImgNext   = sliderImg.parent().next().find('img').height();
    var sliderImgPrev   = sliderImg.parent().prev().find('img').height();
    var sliderH         = sliderImg.get(0).height;
    slider.css('height',sliderH + 40);
    console.log(sliderH, sliderImgNext, sliderImgPrev);
};
$(window).on('load resize orientationchange',function(){
    chSliderHeight();
});

变量sliderImgNext和sliderImgPrev看起来像是返回上一张或下一张幻灯片的值，但我不知道如何在滑动函数中触发 css 高度规则。

在此之前，我有我的滑动功能： 

images.wipetouch({
    wipeLeft: function(result) { 
        target = $('ul.triggers li.selected').index();
        if ( target === lastElem ) { target = 0; }
        else { target = target+1; }
        sliderResponseMobile(target);
        chSliderHeight();
    },
    wipeRight: function() {
        target = $('ul.triggers li.selected').index();
        lastElem = triggers.length-1;
        if ( target === 0 ) { target = lastElem; }
        else { target = target-1; }
        sliderResponseMobile(target);
        chSliderHeight();
    }
});

如果向左或向右滑动，我需要一些条件来运行略有不同的函数或参数。也许这应该在成功函数中运行，我不是 100% 确定。也许吊装？

我发现很难解决在chSliderHeight中编写可用于wipeLeft和wipeRight函数的函数的问题。

我有一个完整的小提琴，有一个单一的依赖项（以及加载的所有其他代码）在这里

这也包含所有其他代码和变量。

好的设法

让它工作。

我遇到的一个问题，因为滑块使用淡入/淡出函数，调用slider.find('li:visible img');返回的长度为 2，因为在调用函数时可以看到两张幻灯片。

所以我把我的选择器改成了这个：

slider.find('li[class="active"] img');

现在长度为 1。

然后我写了一个这样的回调函数： 

var callback = function(){
    var slider          = $('.slider');
    var sliderImg       = slider.find('li[class="active"] img');
    var sliderH         = sliderImg.get(0).height;
    slider.css('height',sliderH + 40);
};

并将回调函数传递给 wipetouch 函数，如下所示： 

images.wipetouch({
        wipeLeft: function(result) { 
            target = $('ul.triggers li.selected').index();
            if ( target === lastElem ) { target = 0; }
            else { target = target+1; }
            sliderResponseMobile(target);
            callback();
        },
        wipeRight: function() {
            target = $('ul.triggers li.selected').index();
            lastElem = triggers.length-1;
            if ( target === 0 ) { target = lastElem; }
            else { target = target-1; }
            sliderResponseMobile(target);
            callback();
        }
    });

sliderResponseMobile(target);现在看起来像这样（因此它会向每张幻灯片添加一个活动类）：

function sliderResponseMobile(target) {
        images.removeClass('active').fadeOut(200).eq(target).fadeIn(400).addClass('active');
    }

这是一个工作的小提琴

相关文章：