0

我在网站上调用了以下脚本：

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/scripts.js"></script>
<script defer src="js/jquery.flexslider-min.js" ></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js" ></script>
<script src="js/modernizr.html"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.gmap.js"></script>
<script src="js/skrollr.min.js"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

raphael.js和init.js设置了一个技能图（如在此处找到）。问题是，除非我同时禁用scripts.js和main.js（它们是自定义脚本，我将它们包含在“不工作”小提琴中），否则该图表不起作用。

如果我将raphael.js和init.js放在其他两个之上，那么图表是部分构建的。所以很明显，其他两个脚本一起（因为如果我省略一个或另一个没有任何变化），导致某些事情不会发生或在两个脚本中的一个或另一个中不正确地发生，raphael.js和init.js。

我一直在尝试找出可能导致raphael.js或init.js失败的scripts.js和main.js中究竟发生了什么。也许有人可以弄清楚，因为这对我来说是个谜。

工作：在这个 Fiddle中，没有那些有问题的脚本的正常图表工作正常。

不工作：在这个 Fiddle中，我包括script.js和main.js脚本，瞧，图表不再工作：它消失了！

4

1 回答 1

0

好的！找到了答案！耶！

好吧，我知道如何修复它，但不确定为什么它首先被破坏了。虽然我想我包含的脚本之一是设置一些东西，以便 jQuery 函数不能只由引入$(...)...，而是需要在里面jQuery.noConflict()(function($){ ... }。所以，为了它的价值，我不得不用上面的调用将这些代码包装在init.js中：

jQuery.noConflict()(function ($) {
  $('.get').find('.arc').each(function (i) {
    var t = $(this),
      color = t.find('.color').val(),
      value = t.find('.percent').val(),
      text = t.find('.text').text();

    rad += 30;
    var z = r.path().attr({
      arc: [value, color, rad],
      'stroke-width': 26
    });

    z.mouseover(function () {
      this.animate({
        'stroke-width': 50,
        opacity: .75
      }, 1000, 'elastic');
      if (Raphael.type != 'VML') //solves IE problem
        this.toFront();
      title.stop().animate({
        opacity: 0
      }, speed, '>', function () {
        this.attr({
          text: text + '\n' + value + '%'
        }).animate({
          opacity: 1
        }, speed, '<');
      });
    }).mouseout(function () {
      this.stop().animate({
        'stroke-width': 26,
        opacity: 1
      }, speed * 4, 'elastic');
      title.stop().animate({
        opacity: 0
      }, speed, '>', function () {
        title.attr({
          text: defaultText
        }).animate({
          opacity: 1
        }, speed, '<');
      });
    });
  });
});

和

jQuery.noConflict()(function($){
  $(function(){ o.init(); });
});

如果那里有人知道如何解释为什么，那么欢迎您添加到这个答案并进一步教育我们！

于 2013-06-18T18:47:40.443 回答