gpt4 book ai didi

javascript - jQuery 冲突脚本

转载 作者:行者123 更新时间:2023-12-02 16:17:10 26 4
gpt4 key购买 nike

我有一个 jQuery v1.11.1 链接到我的网页以及其他库(不是 jQuery,但与 jQuery 一起运行),一切正常,直到我添加显示/隐藏功能。该功能本身运行良好,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>

脚本停止工作:

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

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

这个 fiddle 拥有所有库/插件以及显示/隐藏代码,这些代码也不适用于 fiddle => http://jsfiddle.net/devyaqoob/k3036fbv/

最佳答案

您的 fiddle 出现三个问题:

1 - "Cannot read property 'msie' of undefined" from slider.js and portfolio.js

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

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

2 - "Cannot read property 'top' of undefined" from aniheader.js

原因:您的 html 不包含 jQuery('#content-container') 选择器。

解决方案:在页面中为此选择器添加 html,或者在插件中添加检查以防未定义。

3 . "undefined is not a function" from page script toggle code.

原因: jQuery 使用 jQuery 关键字初始化。

解决方案:将 $ 替换为 jQuery,并在包含 jQuery 后立即插入此代码。

因此,您的 View 结构 (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>

注意:上述代码是使用给定插件在本地测试的。

关于javascript - jQuery 冲突脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29466134/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com