Question

我有一个响应式菜单和响应式幻灯片，需要javascript和jquery，但只有一个有效。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav({
        prependTo:"#border-orange"});
});
</script>

第二个有效但第一个没有。当我将它们切换时，第二个可以工作，但第一个不工作。有没有办法结合代码，以便两个脚本都可以工作，或者是“一个或另一个”的情况？

Answer 1

你包括jQuery两次，只需删除第二个引用，你可以根据需要拥有$(document).ready()部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menu').slicknav({
        prependTo:"#border-orange"});
});
</script>

Answer 2

使用多个版本的jQuery非常罕见。你确定，这是必要的吗？否则，请尝试

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/jquery.slicknav.js"></script>

<script>
$(document).ready(function(){
    $(".rslides").responsiveSlides();
    $('#menu').slicknav({
        prependTo:"#border-orange"});
});
</script>

如果需要使用多个版本的jQuery，请考虑使用jQuery.noConflict()

Answer 3

如果您想使用多个版本的jQuery，请使用noConflict()

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

<script>
    var $183 = jQuery.noConflict(true);
    $183(function($) {
        $(".rslides").responsiveSlides();
    });
</script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script type="text/javascript">
    jQuery(function($){
        $('#menu').slicknav({
            prependTo:"#border-orange"});
        });
</script>

Answer 4

如果您需要两个版本，则可以将$.noConflict()用于一个版本：

var jQuery_1.8.3 = $.noConflict(true);

然后，您可以使用jQuery_1.8.3代替$来处理需要jQuery 1.8.3的代码。

jQuery_1.8.3 (function() {
    jQuery_1.8.3(".rslides").responsiveSlides();
});

对于其他版本，您可以照常使用$。

同一网页上有多个javascript / jquery脚本

4 个答案: