Question

我遇到了我的脚本无法找到正确修复的问题。我有这个代码，它使用glassbox.js及其所有附加功能，它用于工作（它适当地显示了玻璃盒）但是因为我将JQuery添加到文件中它已停止工作。我不知道如何重新排列或调用脚本以使其再次运行。注释掉的行myBox。具体是导致问题的行：

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

Answer 1

您必须将jQuery放入noConflict并将$传递到ready事件：

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

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

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

1 个答案: