javascript - 我选择了一年又一年的下拉列表，我想仅循环显示所选年份的画廊

Question

我想使用 foreach 循环 按所选年份动态显示图库。目前，URL 数据的所有图像都存在于我想提供给 foreach 循环 的ajax 成功中。我按年份调用 ajax 请求 onChange() 将年份传递给 controller 然后 model 以按所选年份获取数据。

但是在我的 ajax 成功中 console.log(data); 它显示了数据，但如何将我的图像 URL 提供给 foreach 循环。

查看:

    <section id="gallery">
     <div class="container-fluid pt-70 pb-0">
      <form role="form" id="gallery_form" name="gallery_form" method="post" autocomplete="off">
        <div class="row">
         <div class="col-md-8 col-md-offset-2 ">
         <div class="form-group" class="form-control">
            <label><b style="color: #fff">Years</b></label>
            <select class="form-control" name="year" id="year" style="color: #fff">
               <option value="">Select Year</option>
                  <?php
                  foreach(range(2013, (int)date("Y")) as $year) {
                      echo "\t<option value='".$year."'>".$year."</option>\n\r";
                  }
                  ?>
           </select>
           </div>
          </div>
        </div>      
        </form>
     </div>
    </section>
     <div id="hide_gallery">
      <section id="gallery" class="bg-lighter">
          <div class="container-fluid pt-70 pb-0">
             <div class="section-content">
                <div class="row">
                  <div class="col-md-12">
                     <div class="gallery-lsit">
                    <?php foreach ():?> 
                      <figure class="col-md-3">
                          <a class="img-popup pan" data-fancybox="gallery" href="#">
                              <img alt="picture" src="#" class="img-fluid">
                          </a>
                          <h3 class="text-center my-3"><?php echo ['']?></h3>
                      </figure>
                  <?php endforeach;?>
                    </div>
                  </div>
                </div>
             </div> 
          </div>
    </section>
    </div>
<script>
$(document).ready(function() {
   $("#hide_gallery").hide();
});
  $('#year').on('change',function(){
     var Year = $('#year').val();
     $.ajax({
          url :"<?php echo base_url();?>MainController/yearWiseGalleryPage",
          type:"POST",
          data:{
            Year:Year,
          },
          dataType: "json",
          success: function(data)
          {
            console.log(data);

            $("#hide_gallery").show();

          },
          error:function(data)
          {
            alert("error message"+data);
          },async:false,
      });    
  });
</script>

Controller :

public function yearWiseGalleryPage()
  {
    $syear    = $this->input->post('Year');
    $Result   = $this->web_model->yearWise($syear);
    $formData = array('imgYear' => $Result);
    echo json_encode($formData);
  }

型号:

public function yearWise($syear){
    $this->db->select('*');
    $this->db->from('home_page_gallery');
    $this->db->where('year',$syear);
    return $this->db->get()->result_array();
  }

Answer 1

尝试修改这样的 JavaScript 代码，以便在 ajax 调用完成后用图像填充图库元素:

<script>
$(document).ready(function() {
   $("#hide_gallery").hide();
});
  $('#year').on('change',function(){
     var Year = $('#year').val();
     $.ajax({
          url :"<?php echo base_url();?>MainController/yearWiseGalleryPage",
          type:"POST",
          data:{
            Year:Year,
          },
          dataType: "json",
          success: function(data)
          {
            console.log(data);

            loadImages(data.imgYear);
            $("#hide_gallery").show();

          },
          error:function(data)
          {
            alert("error message"+data);
          },async:false,
      });    
  });

  function loadImages(data) {
    let html = "";
    $.each(data, function(k, v){
        html += `<figure class="col-md-3">
                     <a class="img-popup pan" data-fancybox="gallery" href="${v.image_url}">
                         <img alt="picture" src="${v.image_url}" class="img-fluid">
                     </a>
                     <h3 class="text-center my-3">${v.title}</h3>
                 </figure>`
    })
    $('#hide_gallery .gallery-lsit').html(html);
  }
</script>