为什么我的一个效果在添加另一种效果后停止工作？

Question

如果这是一个愚蠢的问题，我很抱歉。

我之前为我的联系表单创建了一个灯箱效果，并且效果很好。单击联系人，灯箱弹出，其中包含单独的 html 页面中的联系人表单。脚本参考如下：

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

然后，我通过教程添加了一个类似 coda 的滑块框，然后将以下脚本添加到头部，一切正常：

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

完成后，我发现我的初始灯箱功能停止工作，现在链接只是将我发送到 html 页面。没有灯箱。现在是完整的头：

<title>index</title> 
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

这是我发送到灯箱的导航：

    <a href="index.html">Overview</a> |
    <a href="index.html">Client List</a> |
    <a href="index.html">Reviews</a> |
    <a href="index.html">News</a> |
    <a href='hiddenforms/candidateform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Candidates</a> | 
    <a href='hiddenforms/contactform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Contact</a> | 
    <a href="candidate.html">Share</a>

我希望这会有所帮助。你可以在一个页面上有太多的 javascript 吗？我该如何解决这个问题？

Answer 1

我也有类似的问题。我安装了 Wordpress 插件“Lightbox 2”和“PressOK - Collapsible Region”。安装 PressOK - Collapsible Region 后，灯箱效果停止工作。

查看代码后，通过注释掉pressok-collapsible-region/PressOK-collapsible-region.php中的一行代码找到了解决方法，如下图。现在两个插件都可以工作了！我希望这会有所帮助。

function collapsible_region_javascript() {

/*   echo '<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>'; */

    $siteroot = get_bloginfo('wpurl');
    echo '<link rel="stylesheet" type="text/css" media="all" href="' . $siteroot . '/wp-content/plugins/pressok-collapsible-region/style.css" />';
    echo '<script language="javascript" type="text/javascript" src="' . $siteroot . '/wp-content/plugins/pressok-collapsible-region/collapsible-region.js"></script>';
}

Answer 2

在您的错误控制台（Firebug、Web Inspector 等）中查找错误。如果一个脚本正在覆盖另一个脚本所期望的属性，它可能会破坏某些东西。您可能还需要考虑至少将所有脚本连接到一个文件进行部署，以减少网络延迟。

编辑：它也可能是 jQuery 和 Prototype 和/或 Scriptaculous 之间的冲突。 jQuery 试图避免与其他库发生冲突，但只能控制其中的一部分。确保 jQuery 在其他脚本之前加载，并在末尾添加 jQuery.noConflict();。