Question

我正在尝试使用owl carousel创建表单向导。我有一些条件javascript运行，以查看哪些表单元素获得某些输入。

例如，我有许多选择框，其中包含是或否答案，根据您选择的答案，它会显示或隐藏其他选择框。这是我想要做的一个例子。

以下是我为Owl Carousel使用的代码。

$('.consultationSlider').owlCarousel({

    singleItem:true,
    mouseDrag: true,
    touchDrag: false,
    navigation : false,
    pagination : false,
    autoHeight: true,
    slideSpeed: 800

});

如果单击下一步按钮，您将看到自动高度正常工作。但是，当您单击“请选择”选择框并单击“否”时，您将看到另一个选择框出现。

我怎样才能让猫头鹰旋转木马重新计算高度以弥补添加的元素？

Answer 1

另一个答案是每隔几秒使用一个间隔来更新代码，这会增加负载并且不是一个干净的解决方案。这个解决方案更清洁，不需要额外的代码，只在需要时才使用该功能......

setInterval(function () {
  $(".owl-carousel").each(function () {
    $(this).data('owlCarousel').autoHeight();
  });
});

Answer 2

Owl carousel提供了有关操纵滑块内容的文档，值得一看。

http://owlgraphic.com/owlcarousel/demos/manipulations.html

如果勾选了选择并添加了新的选择框，则必须重建滑块。

Answer 3

演示：http://jsfiddle.net/g23aqagv/

$(document).ready(function() {

setInterval(function(){
 $(".owl-carousel").each(function(){
    $(this).data('owlCarousel').updateVars();
 });
},1500);

});

缩短更新时间，但不能太短。这适用于Owl Carousel的稳定版本1，我不知道Owl2。

在您的情况下，您可以执行以下操作（根据@YeahMKD）：

$('.websiteDeveloped').change(function(){
    if ($(this).val() == 'no'){
        $('.completitionDate').show();
        $('.consultationSlider').data('owlCarousel').updateVars();
    } else if ($(this).val() == 'yes'){
        $('.completitionDate').hide();
        $('.consultationSlider').data('owlCarousel').updateVars();
    }
});

Answer 4

从owl initilization中删除此属性const NameType = new graphQLObjectType({ name: 'Name', fields: () => ({ firstName: { type: GraphQLString }, lastName: { type: GraphQLString }, }), }) const UserType = new GraphQLObjectType({ name: 'User', fields: () => ({ id: { type: GraphQLID }, email: { type: GraphQLString }, name: { type: NameType } }) })的属性

猫头鹰旋转木马自动高度重新计算

4 个答案: