Как запустить несколько javascripts на одной странице?

Question

У меня возникла проблема с моим сайтом. Я пытаюсь получить 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, поэтому любая помощь будет очень признательна!

Answer 1

Есть несколько вещей, которые вы можете попытаться добиться этого.

1. Убедитесь, что ваш сценарий втягивания в страницу, один способ проверить это с помощью вкладки «источников» в Chrome Debugger и поиск файла еще в разделе HTML головки

2. Убедитесь, что вы включили другие скрипты после включения jQuery, поскольку это, безусловно, зависит от этого.

3. Проверьте, включен ли jQuery правильно и только один раз.

4. Остерегайтесь конфликтов jQuery. Существует и другая библиотека, которая переопределяет $, поэтому ваш код не работает, потому что $ больше не является псевдонимом для jQuery. Вы можете использовать jQuery.noConflict(), чтобы избежать конфликтов с другими библиотеками на странице, которые используют одну и ту же переменную $.