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を他の 2 つの上に配置すると、ダイアグラムは部分的に構築されます。明らかに、他の 2 つのスクリプトが一緒になって (どちらか一方を省略しても何も変わらないため)、2 つのスクリプトraphael.jsとinit.jsの一方または他方で何かが起こらないか、正しく起こらない原因になっています。

私は、scripts.js と main.js の両方で、raphael.js または init.js のいずれかが失敗する原因となっている可能性がある正確な原因を見つけようとしています。私には謎なので、誰かがそれを理解できるかもしれません。

WORKING:この Fiddleでは、問題のあるスクリプトのない通常のダイアグラムは正常に機能しています。

動作していません:この Fiddleには、script.jsおよびmain.jsスクリプトが含まれています。ほら、ダイアグラムが機能しなくなりました: 消えてしまいました!

4

1 に答える 1

0

わかった！答えが見つかりました！わーい！

まあ、私はそれを修正する方法を知っていますが、そもそもなぜそれが壊れたのかわかりません. 私が含めているスクリプトの1つは、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(); });
});

誰かがWHYを説明する方法を知っている場合は、この回答に追加して、さらに教育してください。

于 2013-06-18T18:47:40.443 に答える