识别并修复javascript/prototype/jquery冲突？

我遇到了一个我无法找到适当修复程序的脚本的问题。我有这个代码，它使用glassbox.js和它的所有额外功能，它用来工作（它适当地显示了glassbox），但是因为我添加了JQuery到它已停止工作的文件。我不知道如何重新排列或调用脚本，以便它再次运行。注释掉线myBox.whatever是专门导致了问题的线路：识别并修复javascript/prototype/jquery冲突？

@model OneEightyWebApp.Models.Centres 
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" /> 

<head> 
    <title></title> 

    <script src="../../Content/javascripts/prototype.js" type="text/javascript"> </script> 
    <script src="../../Content/javascripts/scriptaculous/effects.js" type="text/javascript"></script> 
    <script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var spaces = @Html.Raw(Json.Encode(ViewData["spaces"])) 
     function glassLoad() { 
      path_to_root_dir = "../../Content/"; 
      var myBox = new GlassBox(); 
      myBox.init('myBox', '600px', '400px', 'hidden', '', true, true); 
      // myBox.apos('300', '300px'); 
      // myBox.appear(); 
      alert("clicked"); 
     } 

    </script> 
    <script src="../../Content/javascripts/prototype.js"> </script> 
    <script type="text/javascript"> 
     document.observe('dom:loaded', function() { 
      $$("body")[0].on('click', ".class1", function() { 
       var myBox = document.getElementById("myBox"); 
       myBox.style.display = "block"; 
       glassLoad(); 
      }); 
     }); 
    </script> 

    <script src="../../Content/jquery.js"></script> 
    <script type="text/javascript"> 
     jQuery(function() { 
      var array = []; 
      jQuery("#centres").change(function() { 
       var selectedCentre = $("#centres option:selected").text(); 
       $.getJSON("/Centres/output?centreName=" + selectedCentre, function (results) { 
        var data = results; 
        document.getElementById("container2").innerHTML = ""; 
        var div; 
        for (var i = 0; i < document.getElementById("centres").value; i++) { 
         div = document.createElement("div"); 
         div.className = "class1"; 
         div.innerHTML = "Shop " + data[i]; 
         div.innerHTML += "<br>"; 
         div.innerHTML += "Floor Space: <b>" + spaces[i] + " m2 </b>"; 
         div.style.width = "100px"; 
         div.style.height = "100px"; 
         div.style.padding = "0px"; 
         div.style.float = "left"; 
         document.getElementById("container2").appendChild(div); 
        } 

       }); 
      }); 
     }); 
    </script> 

</head> 

<body> 
    <div id="container1" style="width: auto; height: 50px;"> 
     <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="glassLoad();">Generate</button> 
     @Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"]) 
     <select id="mySelect"></select> 
    </div> 
    <div id="container2" style="margin: 10px; float: left;"></div> 

    <div id="myBox" style="display: none; width: 600px; height: 400px;"> 
     <div id="exitButton" style="position: absolute; left: 564px; bottom: 173px; z-index: 1001;" title="close"> 
      <a href="javascript:THIS.fade();"> 
       <img id="exitImage" style="border: none;" src="../../Content/javascripts/glassbox/skins/exitButton.png"></a> 
     </div> 


    </div> 

</body>

来源

2013-03-14 barnacle.m

你必须把jQuery的在noConflict并通过$进入就绪事件在这里：

$.noConflict(); 
jQuery(function ($) { 
    var array = []; 
    ... // use $ from now on instead of jQuery

这是做的一种方式它，检查文档还有其他模式。

来源

2013-03-14 10:57:27 elclanrs

优秀，完美谢谢！ – 2013-03-14 13:13:13

识别并修复javascript/prototype/jquery冲突？

回答

相关问题