如何在一个页面中运行多个javascripts?

时间:2013-04-19 04:42:39

标签: javascript jquery multiple-instances

我的网站遇到了这个问题。我试图让2个脚本在同一页面上运行,但除非我删除,否则一个脚本将无效:

<script src="js/jquery.op.loc.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

以下是我在页面部分插入的javascript代码:

  <script src="js/jquery.op.loc.min.js"></script>
  <link type="text/css" rel="stylesheet" href="css/jquery.op.loc.min.css" />

   <script>
   jQuery(document).ready(function ($) {
        $("#default-usage .to-lock").loc({
            text: {
                header: "How are you today?",
                message: "Hello!"
            },
            theme: "secrets",
            buttons: {
                order: ["twitter-tweet", "facebook-like", "google-plus"]
            },
            twitter: {
                tweet: {
                    url: "http://twitter.com",
                    text: "tweet!"
                }
            },
            facebook: {
                like: {
                    url: "http://facebook.com"
                },
                appId: "427542137301809"
            },
            google: {
                plus: {
                    url: "http://google.com"
                }
            }
        });
    });
  </script>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="<?php if($network == "") {echo '';} elseif($network == "") {echo '';} echo $account_id; ?>"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("div.process").fadeOut(0);
      $("input.button").click(function() {
        $('div.process div.bar').css("width", "0%");
        $("div.process").fadeOut(0);
        $("span.status span").empty();
        $("span.status span").append("On hold");
        $("span.status").css("color", "#FF0000");
        var urlform = $("input.profile").val();
        $.post("<?php echo $filename; ?>?post=1", {url:urlform}, function(data) {
          var exploded = data.split('||');
          var profileimage = exploded[0];
          var profilename = exploded[1];
          if(profilename !== "") {
            $("img.profileimg").attr("src", profileimage);
            $("span.profilename span").empty();
            $("span.profilename span").append(profilename);
            $("span.status span").empty();
            $("span.status span").append("Searching for account");
            $("span.status").css("color", "#FFFF00");
            $("div.process").fadeIn("2000");
            $('div.process div.bar').animate({
              width: "200px"
            }, 14000, function() {
              $("span.status span").empty();
              $("span.status span").append("Account found");
              $("span.status").css("color", "#33FF00");
              setTimeout(function() {startGateway('<?php echo $widget_id; ?>');}, 500);
            });
          } else {
            $("span.status span").empty();
            $("span.status span").append("Account not found!");
            $("span.status").css("color", "#FF0000");
            $("img.profileimg").attr("src", "img/blank.jpg");
          }
        });
      });
    });
  </script> 

我是一个完整的新手,当谈到JavaScript,所以任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

您可以尝试使用此功能。

  1. 确保您的脚本被拉入页面,一种方法是使用Chrome调试器中的“来源”标签并在html主题部分中搜索其他文件

  2. 确保在包含jQuery之后已经包含了其他脚本,因为它肯定取决于它。

  3. 检查jQuery是否正确包含且仅一次。

  4. 注意jQuery冲突。还有一些其他的库覆盖了$,所以你的代码不能工作,因为$不再是jQuery的别名。您可以使用jQuery.noConflict()来避免与页面上使用相同变量$的其他库发生冲突。