Fatal编程技术网

Javascript jQuery冲突脚本

javascript jquery html

Javascript jQuery冲突脚本,javascript,jquery,html,Javascript,Jquery,Html,我有一个jQuery v1.11.1与我的网页以及其他库（不是jQuery，而是与jQuery一起运行）链接。在添加显示/隐藏功能之前，一切都正常。这个函数本身运行良好 但是，它会停止其他功能的工作。因此，我添加了jQuery.noConflict结果保持不变，Show/hide不起作用，也停止了其他脚本 jQuery: <script type="text/javascript"> var jq11 = jQuery.noConflict(true); (function($) {

我有一个jQuery v1.11.1与我的网页以及其他库（不是jQuery，而是与jQuery一起运行）链接。在添加显示/隐藏功能之前，一切都正常。这个函数本身运行良好

但是，它会停止其他功能的工作。因此，我添加了
jQuery.noConflict
结果保持不变，Show/hide不起作用，也停止了其他脚本

jQuery:

<script type="text/javascript">
var jq11 = jQuery.noConflict(true);
(function($) {
    $(document).ready(function() {
        $(".order-button").click(function() {
            $("#order-form").toggle();
            $(".order-button").hide();
        });
    });
}(jq11));
</script>

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>
</div>

<script type="text/javascript" src="/static/js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/static/js/menus.js"></script>
<script type="text/javascript" src="/static/js/fitvid.js"></script>
<script type="text/javascript" src="/static/js/theme.js"></script>
<script type="text/javascript" src="/static/js/portfolio.js"></script>
<script type="text/javascript" src="/static/js/slider.js"></script>


var jq11=jQuery.noConflict（true）；
（函数（$）{
$（文档）.ready（函数（）{
$（“.order按钮”）。单击（函数（）{
$（“#订单”）.toggle（）；
$（“.order按钮”）.hide（）；
});
});
}（jq11））；
HTML:

<script type="text/javascript">
var jq11 = jQuery.noConflict(true);
(function($) {
    $(document).ready(function() {
        $(".order-button").click(function() {
            $("#order-form").toggle();
            $(".order-button").hide();
        });
    });
}(jq11));
</script>

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>
</div>

<script type="text/javascript" src="/static/js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/static/js/menus.js"></script>
<script type="text/javascript" src="/static/js/fitvid.js"></script>
<script type="text/javascript" src="/static/js/theme.js"></script>
<script type="text/javascript" src="/static/js/portfolio.js"></script>
<script type="text/javascript" src="/static/js/slider.js"></script>


一些内容
脚本停止工作：

<script type="text/javascript">
var jq11 = jQuery.noConflict(true);
(function($) {
    $(document).ready(function() {
        $(".order-button").click(function() {
            $("#order-form").toggle();
            $(".order-button").hide();
        });
    });
}(jq11));
</script>

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>
</div>

<script type="text/javascript" src="/static/js/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/static/js/menus.js"></script>
<script type="text/javascript" src="/static/js/fitvid.js"></script>
<script type="text/javascript" src="/static/js/theme.js"></script>
<script type="text/javascript" src="/static/js/portfolio.js"></script>
<script type="text/javascript" src="/static/js/slider.js"></script>
************更新************

这个提琴有所有的库/插件以及显示/隐藏代码，这些代码在提琴上也不起作用=>

尝试使用下面的工作代码。我已将
$
替换为
jq11

同样，在包含其他库之后，使用此jQuery代码

var jq11=jQuery.noConflict（true）；
jq11（文件）.准备就绪（功能（）{
jq11（“订单按钮”）。单击（功能（）{
jq11（“订单”）.toggle（）；
jq11（“订单按钮”）.hide（）；
});
});



一些内容
您的小提琴中出现了三个问题：

1-“无法从slider.js和
portfolio.js

原因：jquery-1.9.1版本不支持jquery.browser.msie

解决方案：添加jquery-migrate-1.1.1.js将解决这两个问题

2-“无法从aniheader.js读取未定义”的属性“top”

原因：您的html不包含jQuery（“#内容容器”）选择器

解决方案：在页面中为此选择器添加html，或者在未定义的情况下添加签入插件

三,。页面脚本切换代码中的“未定义不是函数”

原因：jQuery是用jQuery关键字初始化的

解决方案：用jQuery替换$，并在包含jQuery后立即插入此代码

因此，您的视图结构（html）应如下所示：


<html>
    <head>
        <title>jQuery conflicting script(s)</title>
        <script type="text/javascript" src="/static/js/jquery.min.js"></script>     

        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery(".order-button").click(function() {
                    jQuery("#order-form").toggle();
                    jQuery(".order-button").hide();
                });
            }); 
        </script>

        <script type="text/javascript" src="/static/js/jquery-migrate-1.1.1.js"></script>
        <script type="text/javascript" src="/static/js/menus.js"></script>
        <script type="text/javascript" src="/static/js/theme.js"></script>
        <script type="text/javascript" src="/static/js/slider.js"></script>
        <script type="text/javascript" src="/static/js/fitvid.js"></script>
        <script type="text/javascript" src="/static/js/aniheader.js"></script>
        <script type="text/javascript" src="/static/js/jquery.blockUI.min.js"></script>
        <script type="text/javascript" src="/static/js/portfolio.js"></script>
        <script type="text/javascript" src="/static/js/classie.js"></script>
        <script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>

        <style>
            #order-form { display: none; }
        </style>

    </head>

    <body>
        <a href="#" class="order-button">Place Order</a>
        <div id="order-form">
            <h3>Place Your Order</h3>
        </div>
    </body>
</html> 




jQuery冲突脚本
jQuery（文档）.ready（函数（）{
jQuery（“.order按钮”）。单击（函数（）{
jQuery（“#订单”）.toggle（）；
jQuery（“.order按钮”）.hide（）；
});
}); 
#订单{显示：无；}
下单



注意：以上代码是使用给定的插件在本地测试的。
哪些其他功能不起作用？您正在加载多个版本的jQuery？@yaqoob如果您希望我们帮助您，我们需要有关您问题的更多详细信息。请告诉我们哪些函数在单击后不起作用。如果其他脚本（错误地）编码为使用
$
符号，该怎么办。除非要释放$symbol，否则不需要jQuery.noConflict。除非使用多个jQuery库，否则不应发生冲突。您可以对不同插件的代码使用$/jQuery关键字，包装在DOM ready函数中。@yaqoob在包含其他库后编写此jQuery代码。简单地包含其他库不会导致冲突，如果您不调用它们的初始化器。@ RululDeAs:<代码> Type Error：jQuery不是函数菜单。JS:124:Type错误：$滑块是未定义的滑块。JS:47：参考错误：$GalErrSundRead不为< /Cord> @ YyQoOB在上面的答案中尝试更新的jQuery代码。@ YaqOOB，考虑这个演示示例。我的重点是使所有插件都起作用。我不知道你还有什么CSS/脚本代码。这就是我要求提供完整代码的原因。您应该使用适当的html、CSS和所有其他库创建一个fiddle/codepin示例，以使其更清晰。让我来研究这个问题@看到我的变化了吗。