Question

我有这两个脚本，问题是只有在#hotel state更改时才会调用函数检查。如何进行功能检查，并且#hotel的情况不会改变。

var hotelMap = { hotel_a: 15, hotel_b: 5, hotel_c: 10 }; //Edw mporeis na allazeis to release period gia kathe ksenodoxeio
$(function() {
   $('#hotel').change(function() {
     var selectVal = $('#hotel :selected').val();
     $("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
   });
        var dates = $('#from, #to').datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            dateFormat: 'yy-m-d',
            minDate: 15,//Episis edw prepei na mpainei to release period tou prwtou stoixeiou sth lista
            numberOfMonths: 3,
            onSelect: function(selectedDate) {
                var option = this.id == "from" ? "minDate" : "maxDate";
                var instance = $(this).data("datepicker");
                var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });

$(document).ready(check);
            function check(){
                $('#from, #to, #hotel').bind('change', update);
                $('#wait').show();
            }
            function update(){
                var from=$('#from').attr('value');
                var to=$('#to').attr('value');
                var hotel=$('#hotel').attr('value');
                $.get('get_availability.php', {from: from, to:to, hotel:hotel}, show);
            }
            function show(avail){
                $('#wait').hide();
                $('#availability').html(avail);
            }

Answer 1

将第二个文件中的函数移出文档就绪（在窗口级别）。目前，它们仅限于文档就绪事件。

然后你可以从任何地方调用函数（尽管你可能想把它们放在一个闭包中）。由于首先评估函数，因此加载文件的顺序无关紧要。

出于性能原因，最好尝试将此代码放入一个文件中。如果可以，那么您可以将函数与代码放在一个document.ready中。这可能是最好的解决方案。

Answer 2

您可以使用jQuery的trigger事件。因此，在代码中的某处，您可以添加：

$('#hotel').trigger('change');

编辑：

我更新了你的demo ...我在更改函数内部和datepicker函数内添加了一个名为“update”的新触发事件。然后我将check()函数更改为绑定到更新和模糊事件（由于某种原因，模糊在日期选择器窗口中效果更好）。

以下是我最终得到的代码：

var hotelMap = { hotel_a: 15, hotel_b: 6, hotel_c: 10 };
$(function() {
 $('#hotel').change(function() {
  // assign the value to a variable, so you can test to see if it is working
  var selectVal = $('#hotel :selected').val();
  $("#from, #to").datepicker("option", "minDate", hotelMap[selectVal]);
  $(this).trigger('update');
 });

 var dates = $('#from, #to').datepicker({
  defaultDate: "+1w",
  changeMonth: true,
  dateFormat: 'yy-m-d',
  minDate: 10,
  numberOfMonths: 1,
  onSelect: function(selectedDate) {
             var option = this.id == "from" ? "minDate" : "maxDate";
             var instance = $(this).data("datepicker");
             var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
             dates.not(this).datepicker("option", option, date);
             $(this).trigger('update');
            }
 });
});

$(function(){
 $('#from, #to, #hotel').bind('update blur', function(){  
  var from=$('#from').attr('value');
  var to=$('#to').attr('value');
  var hotel=$('#hotel').attr('value');
  $('#availability').html(hotel + ' : ' + from + ' -> ' + to);
 });
})

结合2个jquery脚本一起工作

2 个答案: