jQuery库和脚本冲突

Question

I have 3 scripts which includes a responsive menu, image slider and also a date picker but something is stopping them from working. 我有3个脚本，其中包括响应式菜单，图像滑块和日期选择器，但有一些脚本使它们无法正常工作。 I've tried removing or updating libraries and I am able to get 1 or 2 of the scripts working but not all of them. 我尝试删除或更新库，但我可以使1个或2个脚本正常工作，但不是全部。

Is there anything to rectify the following code? 有什么可以纠正以下代码的吗？

Thanks. 谢谢。

<head>
<title>
<?php echo $bsiCore->config['conf_apartment_name'];?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet'     type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<!-- end google fonts -->
<!--nav-->




<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/craftyslide.css" />
<link href="js/menu/superfish.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/craftyslide.min.js"></script>
<link href="web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function(){   
   $("#slideshow").craftyslide({
      'width': 600,
      'height': 350,
      'pagination': false,
      'fadetime': 1000,
      'delay': 5000
    });
});
</script> 
<script type="text/javascript" src="js/menu/superfish.js"></script>

<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="web/js/jquery.min.js"></script>



<?php if($bsiCore->config['conf_rental_type']==1){ ?>
<script type="text/javascript">

$(document).ready(function(){   
$.datepicker.setDefaults({ dateFormat: '<?php echo $bsiCore->config['conf_dateformat'];?>' });  
$( "#txtFromDate, #txtToDate" ).datepicker({
        minDate: 0,
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function( selectedDate ) {
            if(this.id == 'txtFromDate'){
              var dateMin = $('#txtFromDate').datepicker("getDate");
              var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() +         <?php echo $bsiCore->config['conf_minimum_stay'];?>);
              var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() +         <?php echo $bsiCore->config['conf_maximum_stay'];?>);
              $('#txtToDate').datepicker("option","minDate",rMin);
              $('#txtToDate').datepicker("option","maxDate",rMax);                    
            }

        }
    });


$("#datepickerImage").click(function() { 
$("#txtFromDate").datepicker("show");
});
$("#datepickerImage1").click(function() { 
$("#txtToDate").datepicker("show");
});

$('#btn_appmt_search').click(function() {       
    if($('#txtFromDate').val()==""){
        alert('Please Select Check In Date.');
        return false;
    }else if($('#txtToDate').val()==""){
        alert('Please Select Check Out Date.');
        return false;
    } else {
        return true;
    }     
}); 
});
</script>
<?php } elseif($bsiCore->config['conf_rental_type']==2){ ?>
<script type="text/javascript">
$(function() {
$.datepicker.setDefaults({ dateFormat: '<?php echo $bsiCore->config['conf_dateformat'];?>',  minDate: new Date(), numberOfMonths: 2 });
$("#txtFromDate1").datepicker(

    { beforeShowDay: function(day) {
        var day = day.getDay();
        if (day == <?php echo $bsiCore->config['conf_week_checkin_day'];?> ) {
            return [true, "somecssclass"]
        } else {
            return [false, "someothercssclass"]
        }
    }
    });
    $("#datepickerImage").click(function() { 
        $("#txtFromDate1").datepicker("show");
    });

    $('#btn_appmt_search').click(function() {       
        if($('#txtFromDate1').val()==""){
            alert('Please Select Check In Date.');
            return false;
        } else {
            return true;
        }     
    });
});
</script>
<?php } elseif($bsiCore->config['conf_rental_type']==3){ ?>

<script type="text/javascript">
$(document).ready(function() {
var currentTime = new Date()    
var minDate1 = new Date(currentTime.getFullYear(),currentTime.getMonth() +2, -1);
$('#txtMonthIn').datepicker({
 changeMonth: true,
 changeYear: true,
 dateFormat: 'MM yy',
   showButtonPanel: true,
   minDate: minDate1,

 onClose: function() {
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
 },

 beforeShow: function() {
   if ((selDate = $(this).val()).length > 0)
   {
      iYear = selDate.substring(selDate.length - 4, selDate.length);
      iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),     $(this).datepicker('option', 'monthNames'));
      $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   }
}
});

$("#txtMonthIn1").click(function() { 
$("#txtMonthIn").datepicker("show");
});

 $('#btn_appmt_search').click(function() {      
    if($('#txtMonthIn').val()==""){
        alert('Please Select Check in Month.');
        return false;
    } else {
        return true;
    }     
}); 

});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
.ui-datepicker {
width: 17em;
padding: .2em .2em 0;
display: none;
font-size:14px;
}
</style>
<?php } ?>


<script>
    $(function() {
        var pull        = $('#pull');
            menu        = $('nav ul');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

</head>

Answer 1

You're including jQuery twice, once from a CDN and again after including jQuery UI. 您要两次包含jQuery，一次是来自CDN，一次是包含jQuery UI之后。 This would cause global name collisions and possibly errors showing up in the JS console. 这将导致全局名称冲突，并且可能会在JS控制台中显示错误。

Answer 2

In addition to other great comments that were said here, also make sure your other libraries aren't using the $ symbol as a function or variable name. 除了在这里所说的其他精彩注释之外，还请确保您的其他库没有将$符号用作函数或变量名。

This will create a jQuery conflict . 这将造成jQuery冲突 。

You can use jQuery.noConflict() at the top of your page to resolve that (if that indeed is the problem). 您可以在页面顶部使用jQuery.noConflict()解决此问题（如果确实是问题所在）。

Read more about jQuery.noConflict() 阅读有关jQuery.noConflict（）的更多信息

Hope this helps! 希望这可以帮助！

jQuery库和脚本冲突

问题描述

2 个解决方案

解决方案1
1

解决方案2
0 2014-02-03 00:54:33

jQuery库和脚本冲突

问题描述

2 个解决方案

解决方案1 1

解决方案2 0 2014-02-03 00:54:33

解决方案1
1

解决方案2
0 2014-02-03 00:54:33