Question

我有一个jQuery v1.11.1链接到我的网页以及其他库（不是jQuery，但运行jQuery）一切正常，直到我添加show / hide功能。该函数本身可以正常工作，tested on JSFiddle

但是，它会阻止其他功能发挥作用。所以我添加jQuery.noConflict结果保持不变，显示/隐藏不起作用，也停止其他脚本。

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>

HTML：

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

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

SCRIPTS停止工作：

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

************更新************

这个小提琴具有所有的库/插件以及显示/隐藏代码，这些代码也不在小提琴上工作=＆gt;的 http://jsfiddle.net/devyaqoob/k3036fbv/

Answer 1

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

，在包含其他库之后有这个jQuery代码。

＆＃13;

var jq11 = jQuery.noConflict(true);

jq11(document).ready(function() {
  jq11(".order-button").click(function() {
    jq11("#order-form").toggle();
    jq11(".order-button").hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="order-button">Place Order</a>

<div id="order-form">
<h3>some contents</h3>

＆＃13;

Answer 2

你的小提琴出现了三个问题：

1 - “无法从slider.js中读取未定义的属性'msie' portfolio.js

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

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

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

原因：您的html不包含jQuery（'＃content-container'）选择器。

解决方案：在您的网页中为此选择器添加html，或添加未定义的插件检查。

3。来自页面脚本切换代码的“undefined不是函数”。

原因： 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冲突脚本

2 个答案: