javascript - 多个 CSS 类的每个元素上的等高和窗口调整大小功能

Question

不是编码专家，请找到如何使用“each”的解决方案。但随后又与等高线结合起来。请帮忙!加载完所有内容后，“slick-list”就是与最高幻灯片的高度相等的列表。然后我希望每个“carousel-wrap-x band”在它自己的“slick-list”上相等。

$("[class*='carousel-wrap-'] .carousel").each(function() {
  $(this).slick({
  appendArrows: $(this).siblings('.carousel-control'),
  other functions
  });

  $(this).siblings({
  var offsetHeight = $(this).siblings('.slick-list').outerHeight();
  $(this).siblings('.carousel .band').outerHeight(offsetHeight);

  $( window ).resize(function() {
    $(this).siblings('.carousel .band').css("height", "100%")
    var offsetHeight = $(this).siblings('.slick-list').outerHeight();
    $(this).siblings('.carousel .band').outerHeight(offsetHeight);
  });

  });


});

<div class="carousel-wrap-1">
<div class="carousel-control"></div>
<div class="carousel">
<div class="slick-list">
<div class="band">1</div>
<div class="band">2</div>
<div class="band">3</div>
</div>
</div>
</div>

Answer 1

不确定我完全理解你想要什么 - 这里肯定有很多问题，但如果你对代码相对较新，我赞赏你的冒险精神!我熟悉光滑的 slider 和 jquery 的“each” - 所以这里有一些我认为出错的地方。

jquery 函数 .each() 接受两个参数 - 索引和元素。我认为 index 是您从 $("[class*='carousel-wrap-'] .carousel") 返回的数组的索引 - 我通常不使用它 - 而 element 是由选择器，无 jquery 包装页。

我不记得“this”指的是什么，但查看我自己的代码，我会在其位置使用 $(element)例如

$(".selector").each(function(index, element) {
    $(element).addClass("do-a-thing");
});

至于这一点 - $(this).siblings( {... } );首先， sibling 接受一个选择器 - 我猜传入这样的代码块只会把它炸毁？

其次，包含 .each() 的父选择器用于“[class*='carousel-wrap-'] .carousel” - 这样就会查找轮播的 sibling ，这只是轮播 -控制，这显然不是您想要的。

最后，窗口事件监听器 - 如果您希望将其应用于特定对象，我相信您在函数调用之后需要 .bind(this) (或 .bind($(element)) 或其他)，例如所以:

  $( window ).resize(function() {
    $(this).siblings('.carousel .band').css("height", "100%")
    var offsetHeight = $(this).siblings('.slick-list').outerHeight();
    $(this).siblings('.carousel .band').outerHeight(offsetHeight);
  }.bind(this));

否则我认为“这个”将是窗口

仍然没有 100% 明白你想要做的事情 - 有根据的猜测，你试图使 slick list 内的 band 等高，而 slick-list 是一个轮播幻灯片(所以它是一个包含 3 列或诸如此类)？

如果是这样的话，您是否尝试过将其制作为弹性盒？可能这个问题可以用 CSS 而不是 javascript 来解决，而且这总是更好的选择!

祝你好运，希望有所帮助!