javascript - 选择年份后我有年份下拉我想在循环中仅显示选定年份的画廊
问题描述
我想使用foreach loop
. 目前,URL 数据的所有图像都存在于我想要提供的 ajax 成功中foreach loop
。我按年份调用 ajax 请求,将年份onChange()
传递给controller
then 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>
控制器:
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();
}
解决方案
尝试像这样修改 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>
推荐阅读
- ios - 在 Scenedelgate 中设置视图控制器后 Xcode 11.5 IOS 13.5 黑屏
- php - 如果应用程序关闭,推送通知不会到来 PHP Android
- python - 基数为 10 的 int() 的无效文字:'328.94'(将字节转换为 int() 时)
- java - 如何将字符串转换为列表(Android)?
- android - java.lang.IllegalArgumentException:索引 2 处的绑定值为空?
- laravel - 中断循环并捕获剩余项目计数
- tensorflow - 如何保存我自己训练的词嵌入模型(使用 Keras),如 word2vec 和 Glove
- asp.net - 无法解析类型“Microsoft.AspNetCore.Identity.SignInManager”的服务
- python - 如何使用列表打印文本并将更多列表组件组合到字符串?
- powershell - 使用当前用户 AD 组成员映射网络驱动器