Javascript标记问题 [英] Javascript markers issue

问题描述

在我的页面上，我有自举猫头鹰旋转木马和联系表单。问题是联系表单正在工作或旋转木马滑块滑动图片 - 一个从两个。我发现问题在哪里，但不知道如何解决这个问题。下面找到我的JS代码。首先是猫头鹰旋转木马，其余两个是我的联系表格。

On my page i have bootstrap owl carousel and contact form. Problem is either contact form is working or carousel slider sliding pictures - one from both. I found out where the problem is but have no idea how to solve that. Below find my JS code. First is for owl carousel and rest two for my contact form.

<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>

当我像上面一样使用时 - 我的联系表单正在工作我的意思是邮件我发送并显示消息用户 - 但我的旋转木马不会滑动图片 - 它是堆叠的。

When i use as above - my contact form is working i mean mail i send and message is shown to user - but my carousel is not sliding pictures - it's stack.

如果我想让我的carouse工作，我必须在最后切下标记，如下所示：

If i want my carouse works i have to cut markers at the end like within below:

$(document).ready(function() {

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

    owl.owlCarousel({

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

    });

这个从最后被切断：

this one was cutted from the end:

});

现在轮播作品，但没有联系表单。我相信我的JS中仍然有一些标记错字，你可以看一看吗？

and now carousel works but not contact form. I belive i still have some marker typo within my JS, can you take a look?

进一步讨论：
如果我分裂旋转木马JS分开支架 - 但没有正确封闭的标记 - 然后一切似乎工作..; /见下文：

FURTHER DISCUSSION: If i split carousel JS to separate bracket - but without correctly enclosed mark - then everything seems to be working.. ;/ see below:

<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>

推荐答案

尝试删除json中的注释：

Try to remove the comment inside the json:

$（document）.ready（function（）{

$(document).ready(function() {

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

owl.owlCarousel({

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

});
});

这在语法上不正确。

这篇关于Javascript标记问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！