我正在使用CodeIgniter开发电子商务平台。我正在尝试进行品牌过滤过程。
我有cat1，cat2，cat3这三个类别。目前，我无需刷新页面就可以获取数据，但是仅一个类别，我的意思是单击cat1时可以得到cat1的结果，而其他类别却可以，但是当我单击时cat1会给cat1结果，当我单击cat2会给结果cat1 plus cat2结果。我已经尝试了所有可能的方法，但无法获得正确的结果，也，当我uncheck或click on the selected category again时，它仍然在应该停止过滤的地方显示结果形成未选中的类别。
可见
<ul id="top--cat">
<?php foreach ($categories as $category) : ?>
<li>
<a href="javascript:void(0)">
<label>
<input type="checkbox" name="cates" class="radiochecker" onclick="cat(<?php echo $category['id'] ?>)" >
<?php echo $category['name'] ?>
</label>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="row" id="fetchedprodducts">
<?php foreach ($products as $pro) : ?>
<div class="col-md-3 col-6">
<a class="all-link--pro" href="<?php echo site_url("product_view/".$pro['id']."/".$pro['slug'])?>">
<img class="img-fluid img-size" src="<?php echo base_url("assets/img/posts/".$pro['main_img'])?>">
<p><?php echo $pro['title'] ?></p>
<p><?php echo $pro['categoryname'] ?></p>
<p>Rs. <?php echo $pro['price']; ?></p>
</a>
</div>
<?php endforeach; ?>
</div>
在jquery文件中
function cat(id){
$('#catid').val(id);
cat_filter()
}
function cat_filter(){
var brand_id = $('#catid').val();
$.ajax({
url:'http://localhost/tinta/maker/categories/get_procat',
method:'POST',
data:{'b_id' : brand_id},
success:function(data){
// console.log(data);
$('#fetchedprodducts').html(data);
}
});
}
控制器
public function get_procat(){
$brand_id = $this->input->post('b_id');
$products = $this->Category_model->get_product_by_cat($brand_id);
$outcome = "";
if($products) {
foreach($products as $product){
$outcome .="<div class='col-md-3 col-6'>
<a class='all-link--pro' href='".site_url('product_view/'.$product['id']."/".$product['slug'])."'>
<img class='img-fluid img-size' src='".base_url('assets/img/posts/'.$product['main_img'])." '>
<p>".$product['title']."</p>
<p>".$product['categoryname']." </p>
<p>Rs ".$product['price']."</p>
</a>
</div>";
}
echo $outcome ;
// print_r($products);die;
}
}
模型
public function get_product_by_cat($brand_id){
$this->db->order_by('cv_products.id', 'DESC');
$this->db->select('cv_products.*, cv_category.name as categoryname, product_line.name as linename,cv_category.id as category_id, delivery_time.name as timingname' );
$this->db->join('cv_category','cv_category.id = cv_products.category', 'left');
$this->db->join('product_line','product_line.id = cv_products.product_line', 'left');
$this->db->join('delivery_time','delivery_time.id = cv_products.timing', 'left');
$query= $this->db->get_where('cv_products', array('category' => $brand_id));
return $query->result_array();
}
答案 0 :(得分：1)
我对您的所有代码进行了一些修改。请仔细更换它，否则某些部件可能无法正常工作。
尝试一下：
JS （删除cat和cat_filter函数-不需要）：
注意：append和其他逻辑检查功能可防止重复并在必要时移除猫
更新：添加了$('.first-load').remove();
$(document).ready(function () {
$('.cat-filter').on('click', function (e) {
// any checkboxes checked?
if ($('.cat-filter:checked').length == 0)) {
$('.first-load').show();
return;
} else {
$('.first-load').hide();
}
var brand_id = $(this).attr('data-id');
console.log('category ' + brand_id);
// are we unchecking?
if ($(this).prop('checked') == false) {
console.log('category ' + brand_id + ' unchecked. hiding contents.');
$('.cat-' + brand_id).hide();
return;
}
// check if cat is already rendered
if ($('.cat-' + brand_id).length) {
$('.cat-' + brand_id).show();
console.log('category ' + brand_id + ' already rendered. showing contents.');
return;
}
$.ajax({
url: 'http://localhost/tinta/maker/categories/get_procat',
method: 'POST',
data: {
b_id: brand_id
},
success: function (data) {
$('#fetchedprodducts').append(data);
}
});
});
});
控制器：
注意：请参阅将类添加到第一格。
function get_procat() {
$brand_id = $this->input->post('b_id');
if (is_null($brand_id)) {
exit;
}
$products = $this->Category_model->get_product_by_cat($brand_id);
if ($products) {
foreach ($products as $product) {
$outcome .= "<div class='col-md-3 col-6 cat-{$brand_id}'>
<a class='all-link--pro' href='" . site_url('product_view/' . $product['id'] . "/" . $product['slug']) . "'>
<img class='img-fluid img-size' src='" . base_url('assets/img/posts/' . $product['main_img']) . " '>
<p>" . $product['title'] . "</p>
<p>" . $product['categoryname'] . " </p>
<p>Rs " . $product['price'] . "</p>
</a>
</div>";
}
echo $outcome;
}
}
型号：
如果没有行，则返回false。
function get_product_by_cat($brand_id) {
$this->db->order_by('cv_products.id', 'DESC');
$this->db->select('cv_products.*, cv_category.name as categoryname, product_line.name as linename,cv_category.id as category_id, delivery_time.name as timingname');
$this->db->join('cv_category', 'cv_category.id = cv_products.category', 'left');
$this->db->join('product_line', 'product_line.id = cv_products.product_line', 'left');
$this->db->join('delivery_time', 'delivery_time.id = cv_products.timing', 'left');
$query = $this->db->get_where('cv_products', array('category' => $brand_id));
if ($query->num_rows() > 0) {
return $query->result_array();
}
return false;
}
查看：
注意：添加了类并data-id，删除了函数调用（不再需要）。
<label>
<input type="checkbox" name="cates" class="radiochecker cat-filter" data-id="<?php echo $category['id'] ?>">
<?php echo $category['name'] ?>
</label>
查看第2部分：
注意：已添加类first-load
<div class="row" id="fetchedprodducts">
<?php foreach ($products as $pro) : ?>
<div class="col-md-3 col-6 first-load">
<a class="all-link--pro" href="<?php echo site_url("product_view/".$pro['id']."/".$pro['slug'])?>">
<img class="img-fluid img-size" src="<?php echo base_url("assets/img/posts/".$pro['main_img'])?>">
<p><?php echo $pro['title'] ?></p>
<p><?php echo $pro['categoryname'] ?></p>
<p>Rs. <?php echo $pro['price']; ?></p>
</a>
</div>
<?php endforeach; ?>
</div>