javascript - 如何访问foreach语句中的选择器？

Question

我有两个 ajax 调用，当用户单击 jquery datepicker 上的日期时触发。

在第二个 ajax 调用中，我希望它将响应/数据填充到第一个 ajax 调用中的段落 tag class="spots" 中，以显示该特定时间的可用景点。

我的问题是第二个 ajax 调用仅填充并重复它找到的第一个结果。我认为这是因为我的类选择器在 foreach 行中是相同的。我已经设置了 id + item.id 以使它们动态化，但如何在 jquery 选择器中访问它们？任何帮助，将不胜感激。请参阅下面的代码。

$(document).ready(function() {

//show datpicker calendar set getDay function on select
$( "#datepicker" ).datepicker({
    numberOfMonths: 1,
    showButtonPanel: true,
    onSelect: getDay,

});

 function getDay() {

 var date1 = $('#datepicker').datepicker('getDate');
 var day = date1.getDay();

//set hidden input to numberical value of day
    $('#dayOfWeek').val(day);   
//set hidden textbox value near datepicker to submit date in proper format for db
    $('#date').val($.datepicker.formatDate('yy-mm-dd', date1));  



//ajax form the get available times to play
$.ajax({
  url: $('#form').attr('action'),
  type: 'POST',
  data : $('#form').serialize(),
     success: function(response){

     //clear results before showing another date selected
      $('.table').html("");

      //loop through json results and build table
      $.each(JSON.parse(response), function(i, item) {
          var jdate = $('#date').val();
          var id = item.id;


        $('<tr>').html("<td>" + item.time + "</td><td>"  + '<input type="text" name="jtime" value="' + item.time + '"' + "/>"  + '<input type="text" name="jdate" value="' + jdate + '"' + ">"  + "Spots:" + '<p class="spots" id="spots_' + id + '"'+ ">" + '</p>'  + "</td>").appendTo('#availableTimes');

        });//end loop 

            //fire getSpots function
            getSpots();     

  }//end success
});
return false;

};   //end getDay function

//  get available spots
function getSpots(){

var values = {
        'jtime': $('input[name="jtime"]').val(),
        'jdate': $('input[name="jdate"]').val(),
};

$.ajax({
  //url: form.attr('action'),
 url: '/reservations/getSpots',
  type: 'POST',
 // data : form.serialize(),
 data : values,
      success: function(response){

        $('.spots').html(response);

      }//end success


    }); //end ajax
   return false;

};//end getSpots function


    })//end doc ready            



             </script>

这是一段有效的代码片段，但它使用带有按钮的表单来提交第二个 ajax 调用。我希望它像这样工作而无需按钮提交。希望在选择数据选择器日期时发布第二个 ajax 调用。也许我在想这个错误。

//show datpicker calendar set getDay function on select
$( "#datepicker" ).datepicker({
    numberOfMonths: 1,
    showButtonPanel: true,
    onSelect: getDay
});


})//end doc ready
 function getDay() {

 var date1 = $('#datepicker').datepicker('getDate');
 var day = date1.getDay();

//set hidden input to numberical value of day
    $('#dayOfWeek').val(day);   
//set hidden textbox value near datepicker to submit date in proper format for db
    $('#date').val($.datepicker.formatDate('yy-mm-dd', date1));  



//ajax form the get available times to play
$.ajax({
  url: $('#form').attr('action'),
  type: 'POST',
  data : $('#form').serialize(),
     success: function(response){

     //clear results before showing another date selected
      $('.table').html("");

      //loop through json results and build table
      $.each(JSON.parse(response), function(i, item) {
          var jdate = $('#date').val();
          var id = item.id;


        $('<tr>').html("<td>" + item.time + "</td><td>" + '<form  class="insideForm" action="/reservations/getSpots" accept-charset="utf-8"  method="">'  + '<input type="text" name="jtime" value="' + item.time + '"' + "/>"  + '<input type="text" name="jdate" value="' + jdate + '"' + ">" + '<input type="submit" class="btn btn-primary" value="Spots">' + "Spots:" + '<p class="spots" id="spots_' + id + '"'+ ">" + '</p>' + '</form>' + "</td>").appendTo('#availableTimes');

        });//end loop 


        getSpots();


  }//end success
});
  return false;


};   //end getDay function



//  get available spots
function getSpots(){
            //ajax form the get available spots 


$('.insideForm').submit(function(){
var form = $(this).closest('form');

$.ajax({
  url: form.attr('action'),
  type: 'POST',
  data : form.serialize(),

      success: function(response){

        $('.spots', form).html(response);

      }//end success


    }); //end ajax
 return false;
}); //end submit 

};//end getSpots function

Answer 1

您调用 getSpots 一次并期望所有内容都更新？您需要做的是为每一行调用一次 getSpots，并将 id 传递给 getSpots，以便 getSpots 可以使用正确的输入更新正确的行

请参阅标记为 //**** 的行以了解对代码的更改

A deleted answer had a better approach

function getDay() {
    var date1 = $('#datepicker').datepicker('getDate');
    var day = date1.getDay();
    //set hidden input to numberical value of day
    $('#dayOfWeek').val(day);
    //set hidden textbox value near datepicker to submit date in proper format for db
    $('#date').val($.datepicker.formatDate('yy-mm-dd', date1));
    //ajax form the get available times to play
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: $('#form').serialize(),
        success: function (response) {
            //clear results before showing another date selected
            $('.table').html('');
            //loop through json results and build table
            $.each(JSON.parse(response), function (i, item) {
                var jdate = $('#date').val();
                var id = item.id;
                $('<tr>').html('<td>' + item.time + '</td><td>' + '<input type="text" name="jtime" value="' + item.time + '"' + '/>' + '<input type="text" name="jdate" value="' + jdate + '"' + '>' + 'Spots:' + '<p class="spots" id="spots_' + id + '"' + '>' + '</p>' + '</td>').appendTo('#availableTimes');
                // **** call getSpots for every row
                getSpots('#spots_'+id, item.time, jdate);
            }); //end loop 
        } //end success

    });
    return false;
}    //end getDay function
//  get available spots
// **** accept output id, jtime and jdate
function getSpots(id, jtime, jdate) {
    // get the inputs for the current id
    var values = {
        'jtime': jtime,
        'jdate': jdate,
    };
    $.ajax({
        //url: form.attr('action'),
        url: '/reservations/getSpots',
        type: 'POST',
        // data : form.serialize(),
        data: values,
        success: function (response) {
            // **** update the spots for current id
            $(id).html(response);
        } //end success

    }); //end ajax
    return false;
} //end getSpots function