1

好的，有时 jQuery 是定义的，有时不是。这是我在此页面上使用的以下 jQuery 代码。

如果已定义，则所有列的宽度相同，否则两侧列为 200 像素，中间为 100% 宽度。我一直在尝试在这里定义 jQuery，但无法弄清楚问题到底出在哪里……</p>

任何帮助将不胜感激！

<script type="text/javascript">
if (!window.jQuery) {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = false;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];

   s.parentNode.insertBefore(script, s);
}

var totaltds = 0;
function resizeColumns() {
    jQuery(document).ready(function($) {
        $('tr[class^="tablerow"]').each(function() {
            var tds = $(this).children('td[class^="tablecol"]').length;
            if (tds > totaltds)
                totaltds = tds;
        });
        var contentPadding = $("#content_section").css('padding-left');
        contentPadding = parseInt(contentPadding.substring(0, contentPadding.length - 2));
        var subPadding = contentPadding / totaltds;
        $(window).bind("resize", function(){
            for(var i = 0; i < totaltds; i++) {
                var colWidth = ($("#main_content_section").width() / totaltds) - subPadding;
                $(".tablecol_" + i).css({'width': colWidth + 'px', 'max-width': colWidth + 'px', 'min-width': colWidth + 'px'});
            }

        }).trigger("resize");

        $("#hideMe").parent().parent().parent().hide();
    });
}

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", resizeColumns, false);
else
    addLoadEvent(resizeColumns);

</script>

<div id="hideMe"></div>

所有这些代码都插入到 HTML 的正文中，就像它插入到Module该页面上的 a 一样，并且需要以这种方式。我在这里做错了什么？有没有更好的方法来定义 jQuery 以便始终定义它？

Chrome 的错误几乎所有的时间都在网上jQuery(document).ready(function($) {说jQuery没有定义。

4

2 回答 2

2

试试这个：如果 jQuery 未定义，将其添加到<head>，完成后，调用resizeColumns. 在 上resizeColumns，我也添加noConflict了。

这样，undefined将停止，因为我们将始终等待脚本完全下载后再尝试使用它。

<script type="text/javascript">
 // Localize jQuery variable
 var jQuery;

 /******** Load jQuery if not present *********/
 if (window.jQuery === undefined) {
      var jQueryTag = document.createElement('script');
      jQueryTag.setAttribute("type","text/javascript");
      jQueryTag.setAttribute("src",
      "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js");

      if (jQueryTag.readyState) {
           jQueryTag.onreadystatechange = function() { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                     resizeColumns();
                }
           };
      } else {
           jQueryTag.onload = resizeColumns;
      }
      // Try to find the head, otherwise default to the documentElement
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jQueryTag));
 } else {
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
      resizeColumns();
 }

var totaltds = 0;
function resizeColumns() {
    jQuery = window.jQuery.noConflict(true);
    jQuery(document).ready(function($){
        $('tr[class^="tablerow"]').each(function() {
            var tds = $(this).children('td[class^="tablecol"]').length;
            if (tds > totaltds)
                totaltds = tds;
        });
        var contentPadding = $("#content_section").css('padding-left');
        contentPadding = parseInt(contentPadding.substring(0, contentPadding.length - 2));
        var subPadding = contentPadding / totaltds;
        $(window).bind("resize", function(){
            for(var i = 0; i < totaltds; i++) {
                var colWidth = ($("#main_content_section").width() / totaltds) - subPadding;
                $(".tablecol_" + i).css({'width': colWidth + 'px', 'max-width': colWidth + 'px', 'min-width': colWidth + 'px'});
            }

        }).trigger("resize");

        $("#hideMe").parent().parent().parent().hide();
    });
}

/* // Don't need that listener IMO

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", resizeColumns, false);
else
    addLoadEvent(resizeColumns);*/

</script>
于 2013-05-06T14:27:29.213 回答
0

Can't you just wrap everything?:

// asynchronous function depending on jQuery
(function($){
    // define your shizzle
    var project = this,
        resizeColumns = function(){/**/};
})(jQuery);

This will also secure the $ variable inside this function.

The same can be achieved by adding asynchronous functions to the DOM tree.

window.project = (function($){
    var resizeColumns = function(){/**/};
})(jQuery);

or

window.project = (function(){
    var $ = window.jQuery || {},
        resizeColumns = function(){/**/};
});
于 2013-05-06T14:57:31.503 回答