时间戳

首页 > 解决方案 > 我正在使用 Owl Carousel - 按类别过滤项目，所以我想在每个类别按钮单击时显示类别描述

javascript - 我正在使用 Owl Carousel - 按类别过滤项目，所以我想在每个类别按钮单击时显示类别描述

问题描述

我在 db 中有类别表字段和项目表字段，我正在根据类别 ID 获取数据或项目，并在 Owl Carousel - Filter Javascript 中使用 php codedigniter 显示它们。以下是详细说明。包括图像视图。在此处输入图像描述

实际上我想要什么我试图在类别按钮单击项目下显示类别详细信息 我通过连接类别 ID 和项目类别 ID 将相同的类分配给类别按钮和项目。因此，当我们单击按钮时，具有相同按钮类的项目会完美显示，但在单击特定类别按钮时不会显示类别详细信息。有关更多信息，我也附上了我的代码。请看。并帮助我。如果您了解问题。

我的 PHP Codeigniter 代码是：

<div style="margin-bottom:10px; text-align: center;">
                    <div class="btn-filter-wrap">
                        <button class="btn-filter" data-filter="*">All</button> 
                        <?php $categorydetail = ""; ?>
                        <?php if (!empty($categorydata)) { foreach ($categorydata as $category) {                    
                            $categoryclass = "category".($category['id']);
                            $categoryname = ($category['shortname']); 
                            $categorydetail = ($category['detail']);
                            ?>                                       
                            <button class="btn-filter" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
                        <?php }} ?>
                    </div>
                    <div class="project-slick categories">
                        <?php if (!empty($projectdata)) { foreach ($projectdata as $project) {
                            $projectclass = "category".($project['categoryid']);
                            $title = ($project['title']); 
                            $detail = ($project['detail']); 
                            $image = ($project['userfile']); 
                            ?>                               
                            <div class="item view view-eighth <?php echo $projectclass; ?>">
                                <img class="img-responsive" src="<?php echo base_url('fassets/images/projects/'. $image);?>" />
                                <div class="mask">
                                    <h2><?= $title ?></h2>
                                    <div><?php echo (strlen($project['detail'])>50)?(substr($project['detail'],0,200).'...'):$project['detail']; ?></div>
                                    <a class="info ajax projects" href="<?php echo base_url("maincontroller/pdetail/".$project['id']);?>" >In Large</a>
                                </div>
                            </div>
                            <dir id="catdetail"><?= $categorydetail;?></dir>
                        <?php }} ?>
                    </div>                        
                </div>

这是我的 javascript 代码是：

$(function() {           
    var owl = $('.categories').owlCarousel({
        rel: 'gal',
        width: "100%",
        initialWidth: "0",
        initialHeight: "0",
        height:"100%",
        // loop    :false,
        // margin  :10,
        // nav     :false,
        previous: "<i class='fa fa-chevron-left'></i>",
        next: "<i class='fa fa-chevron-right'></i>",
        close: "<i class='fa fa-times'></i>",
        current: "",
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:4
            }
        }
    })

    /* animate filter */
    var owlAnimateFilter = function(even) {
        $(this)
        .addClass('__loading')
        .delay(70 * $(this).parent().index())
        .queue(function() {
            $(this).dequeue().removeClass('__loading')
        })
    }

    $('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
        var filter_data = $(this).data('filter');

        /* return if current */
        if($(this).hasClass('btn-active')) return;

        /* active current */
        $(this).addClass('btn-active').siblings().removeClass('btn-active');

        /* Filter */
        owl.owlFilter(filter_data, function(_owl) { 
            $(_owl).find('.item').each(owlAnimateFilter); 
        });
    })
})

标签： javascriptphpjquerycodeigniter

解决方案

我通过创建javascript函数解决了这个问题

JS函数

function cat_detail(str) {

     document.getElementById("cat_detail").innerHTML = str;
    // alert(str);

}

之后我调用事件单击按钮并将字符串传递给函数。

<button  class="btn-filter" onclick="cat_detail('<?= $categorydetail ?>')" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>

并创建一个显示详细信息的 ID 为“cat_detail”的 div。:)

推荐阅读