Question

我正在尝试构建一个WebSite，但是当我使用两个版本的jquery qith引导系统（也使用bootstrap验证器）时，我遇到了一些问题。

首先，我已经知道这里有很多关于jquery的2个版本的问题，但我花了最近2天阅读并试图让这个工作，但我不能！这就是我在这里的原因。

所以，在我的头标记中，我设置了我需要运行的两个版本。 1-是使引导脚本工作，如下拉菜单和表单验证。 2-是运行大胆的弹出脚本。

到目前为止，这是我的主要代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validator/vendor/jquery/jquery-1.10.2.min.js"></script>

我尝试使用noConflict（）的脚本部分，但我没有成功。

这就是我所做的。

*我需要更改jquery版本的脚本是用于magnificpopup

<script>
jq1111 = jQuery.noConflict(true);
</script>
<script type="text/javascript">
jq1111(document).ready(function() {
    jq1111('.zoom-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
            verticalFit: true,
            titleSrc: function(item) {}
        },
            gallery: {
                enabled: true
                },
            zoom: {
                enabled: true,
                duration: 500, // don't foget to change the duration also in CSS
                opener: function(element) {
                    return element.find('img');
                }
            }

        });
    });
</script>

任何人都可以帮助我吗？因为我没有想法，当然我在jquery中并不是那么先进。

谢谢！

Answer 1

您需要在包含jQuery的2个jQuery.noConflict标记之间运行script，包括magnificPopup和magnificPopup的标记：

<script src="jquery-1.11.1.min.js"></script>
<script src="magnific-popup.min.js"></script>
<script type="text/javascript">
    var j1111 = jQuery.noConflict() ;
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        j1111.magnificPopup(/* ... */) ;
    });
</script>

Answer 2

使用require.js并根据必要的jQuery版本制作任何模块。例如：

require.config({
  enforceDefine: true,
  baseUrl: '/js',
  shim: {
    'jquery@1.11.1': {
      exports: '$'
    },
    'jquery@2.1.1': {
      exports: '$'
    },
    'bootstrap@3.1.1': {
      deps: [ 'jquery' ], // use jQuery 2.1.1 !
      exports: '$'        // need to export something.... so... export jQuery!
    },
    'magnific': {
      deps: [ 'jquery@1.11.1' ],
      exports: '$.fn.magnificPopup'
    }
  },
  paths: {
    'jquery@1.11.1': 'http://code.jquery.com/jquery-1.11.1.min',  // or a CDN...
    'jquery@2.1.1': 'lib/jquery.min',        // local copy!,
    'bootstrap@3.1.1': 'lib/bootstrap.min',  // local copy!
    'magnific': 'http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min'
  },
  map: {
    '*': {
      'jquery': 'jquery@2.1.1',
      'bootstrap': 'bootstrap@3.1.1'
    }
  }
});

然后，只需要你的jQuery库

require(['jquery', 'jquery@1.11.1', 'jquery@2.1.1', 'magnific'], function ($, $1, $2) {
  console.log($.fn.jquery, $.fn.magnificPopup);
  console.log($1.fn.jquery, $1.fn.magnificPopup);
  console.log($2.fn.jquery, $2.fn.magnificPopup);
});

当然，这将导致正确的输出

2.1.1 undefined
1.11.1 function (n){_();var i=e(this);if("string"==typeof n)if("open"===n){var o,r=b?i.data("magnificPopup"):i[0].magnificPopup,a=parseInt(arguments[1],10)||0;r.items?o=r.items[a]:(o=i,r.delegate&&(o=o.find(r.delegate)),o=o.eq(a)),t._openClick({mfpEl:o},i,r)}else t.isOpen&&t[n].apply(t,Array.prototype.slice.call(arguments,1));else n=e.extend(!0,{},n),b?i.data("magnificPopup",n):i[0].magnificPopup=n,t.addGroup(i,n);return i}
2.1.1 undefined

Bootstrap + 2版本的jquery

2 个答案: