0

我目前有一个匿名函数，可以很好地在包含 jQuery 的页面上滑动内容，但是当不包含 jQuery 时它当然不起作用。

如何通过 JavaScript 加载 jQuery 并使其正常工作？

这是我尝试过的：

(function(){
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  a.src=b;
  document.getElementsByTagName("head")[0].appendChild(a)
})();



(function($){



var css = "html,body {margin: 0px !important;padding: 0px !important;}#popslide {width: 525px !important;height: 250px !important;border: 2px solid #bcbbba !important;border-right: none !important;border-radius: 4px !important;position: fixed !important;bottom: 15% !important;background: #f5f5f7 !important;color: #717175 !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;z-index: 500 !important;}#popslide:before {content: '' !important;padding-bottom: 2px !important;border-bottom: 3px solid #dedfdf !important;width: 525px !important;height: 250px !important;display: block !important;position: absolute !important;z-index: -1 !important;border-radius: 3px !important;}#popslide .question {width: 200px !important;position: absolute !important;left: 25px !important;top: 25px !important;}#popslide h1 {font-size: 20px !important;font-weight: 500 !important;color: #545459 !important;}#popslide .question ul {list-style-type: none !important;padding-left: 10px !important;font-size: 13px !important;}#popslide .question ul li {margin-bottom: 6px !important;}#popslide .question input[type='button'] {background: #f12f09 !important;border: none !important;color: #fff !important;font-family: 'Helvetica Neue', Helvetica, arial, sans-serif !important;font-weight: 400 !important;font-size: 13px !important;border-radius: 3px !important;padding: 8px 20px !important;margin-top: 4px !important;margin-bottom: 5px !important;cursor: pointer !important;}#popslide .question ul li a {color: #4c8ae0 !important;font-size: 12px !important;}#popslide .question input[type='button']:hover {background: #d12200 !important;}#popslide .thumb {width: 250px !important;height: 200px !important;position: absolute !important;right: 30px !important;top: 25px !important;cursor: pointer !important;}#popslide #close {position: absolute !important;width: 20px !important;left: 6px !important;top: 6px !important;z-index: 600 !important;cursor: pointer !important;opacity:0.4 !important;filter:alpha(opacity=40) !important;}";

$('head').append('<style type="text/css">' + css + '</style>');

$('body').append(
    '<div id="popslide">'
  + '  <img src="close.png" id="close" />'
  + '  <div class="question">'
  + '    <h1>Was this cat drugged by the government?</h1>'
  + '    <ul>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote1"> <label for="vote1">Probably</label></li>'
  + '      <li><input type="radio" name="vote" class="vote" id="vote2"> <label for="vote2">Yes</label></li>'
  + '      <li><input type="button" class="vote" value="Vote" id="vote3"></li>'
  + '      <li><a href="#" id="results">See results</a></li>'
  + '    </ul>'
  + '  </div>'
  + '  <img src="sail.gif" class="thumb" />'
  + '</div>'
  );

  document.getElementById('popslide').style.right = '-' + 540 + 'px'

  var right = -540

  function frame() {
    right += 10
    document.getElementById('popslide').style.right = right + 'px'
    if (right == -10) {
      clearInterval(id)
    }
  }

  var id = setInterval(frame, 10)

  $('#popslide .vote, #results, #popslide .thumb').click(function() {
    alert('BAM!');
  })

  $('#popslide #close').click(function() {
    $('#popslide').fadeOut();
  })

})($);
4

2 回答 2

3

您可能刚刚包含带有 script 标签的 jquery，但是对于这种代码，您需要在尝试使用之前检查 jQuery 是否已加载，例如：

(function(){  
  var c=location.protocol;
  var b=c+"//code.jquery.com/jquery-latest.js";
  var a=document.createElement("script");
  a.type="text/javascript";
  if( a.readyState ) {
    a.onreadystatechange = function() {
       if( a.readyState == 'loaded' || a.readyState == 'complete' ) {
          a.onreadystatechange = null;
          loaded();
          }
       };
    }
    else {
      a.onload = function() {
        loaded();
    };
  }
  a.src=b;

  document.getElementsByTagName("head")[0].appendChild(a);
})();
function loaded() {
    var jQuery = window.jQuery.noConflict( true );
    jQuery(document).ready(function($) {
        //use $ here for jQuery manipulations
    });
}
于 2013-11-06T05:19:43.733 回答
0

我现在能想到的唯一方法（虽然不是很漂亮）是设置一个间隔（小的一个 - 100 毫秒左右）来检查$. 如果存在，则清除间隔并调用您的函数。

此外，为了缩短加载时间，您可能希望使用 jquery 的缩小版本，因为它更小。而不是//code.jquery.com/jquery-latest.js，使用//code.jquery.com/jquery-latest.min.js

于 2013-11-06T05:14:26.770 回答