Javascript标记问题

Question

在我的页面上，我有引导猫头鹰轮播和联系表格。问题是联系表格正在工作或轮播滑块滑动图片 - 两者之一。我发现问题出在哪里，但不知道如何解决。下面找到我的 JS 代码。第一个是猫头鹰轮播，剩下两个是我的联系表格。

<script>

$(document).ready(function() {

    var owl = $("#owl-hero");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 1,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"

    });
    });

$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            if (text == "success") {
                $("#msgSubmit" ).removeClass( "hidden" );
                setTimeout(function() {
                    $("#msgSubmit" ).addClass( "hidden");    
                }, 6000);
            }
        },
        error : function() {
            /* You probably want to add an error message as well */
            $("#msgError" ).removeClass( "hidden" );
        }
    });
};

</script>

当我按上述方式使用时 - 我的联系表正在工作，我的意思是我发送邮件并向用户显示消息 - 但我的轮播没有滑动图片 - 它是堆栈。

如果我想要我的旋转木马作品，我必须在末尾剪下标记，如下所示：

$(document).ready(function() {

    var owl = $("#owl-hero");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 1,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"

    });

这个是从头剪掉的：

});

现在轮播有效，但联系表格无效。我相信我的 JS 中还有一些标记错字，你能看一下吗？

进一步讨论： 如果我将 carousel JS 拆分为单独的括号 - 但没有正确封闭的标记 - 那么一切似乎都在工作.. ;/见下文：

<script>

$(document).ready(function() {

    var owl = $("#owl-hero");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 1,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"

    });
    }
</script>

    <script>
$(document).ready(function() {
    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            if (text == "success") {
                $("#msgSubmit" ).removeClass( "hidden" );
                setTimeout(function() {
                    $("#msgSubmit" ).addClass( "hidden");    
                }, 6000);
            }
        },
        error : function() {
            /* You probably want to add an error message as well */
            $("#msgError" ).removeClass( "hidden" );
        }
    });
};

</script>

Answer 1

试试下面的代码：

$(document).ready(function() {

    var owl = $("#owl-hero");

    owl.owlCarousel({

        navigation: false, // Show next and prev buttons
        slideSpeed: 1,
        paginationSpeed: 400,
        singleItem: true,
        transitionStyle: "fade"

    });

    $("#contactForm").on("submit", function(event) {
        if (event.isDefaultPrevented()) {
        } else {
            event.preventDefault();
            submitForm();
        }
    });

});

function submitForm() {
    $.ajax({
        type: "POST",
        url: "mail.php",
        data: $("#contactForm").serialize(),
        success: function(text) {
            if (text == "success") {
                $("#msgSubmit" ).removeClass( "hidden" );
                setTimeout(function() {
                    $("#msgSubmit" ).addClass( "hidden");    
                }, 6000);
            }
        },
        error : function() {
            /* You probably want to add an error message as well */
            $("#msgError" ).removeClass( "hidden" );
        }
    });
}
</script>

Answer 2

尝试去掉json里面的注释：

$(document).ready(function() {

var owl = $("#owl-hero");

owl.owlCarousel({

    navigation: false,
    slideSpeed: 1,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fade"

});
});

语法不正确。