Question

我目前有一个页面部分，通过单击类别按钮来过滤图像，组合样式。我想添加功能以使用DIV显示/隐藏在照片上方显示文本内容，类似于标签的工作方式。这是HTML：

<h1 class="wow slideInDown">Our Services</h1>
                </div><div id="first" class="divexp">This is the graphics content</div><div id="second" class="divexp">This is the motion content</div><div id="first" class="divexp">This is the print content</div><div id="second" class="divexp">This is the design content</div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <img class="img-responsive separator" src="img/separator.png" alt="Separator">
                </div>
            </div>

            <br>

            <!--filters-->
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
                    <div class="" id="filters">
                        <button class="btn btn-default" data-filter="*" data-toggle="tooltip" data-placement="top" title="18">Show All</button>
                        <button class="btn btn-default" data-filter=".graphics" data-toggle="tooltip" data-placement="top" title="4">Graphics</button>
                        <button class="btn btn-default" data-filter=".motion" data-toggle="tooltip" data-placement="top" title="3">Motion</button>
                        <button class="btn btn-default" data-filter=".print" data-toggle="tooltip" data-placement="top" title="5">Print</button>
                        <button class="btn btn-default" data-filter=".design" data-toggle="tooltip" data-placement="top" title="6">Design</button>
                    </div>

我需要添加到以下javascript中，还可以设置过滤按钮以显示隐藏上面的div？

$(document).ready(function(){
"use strict";
//init Isotope
var $container = $('.gallery').imagesLoaded( function() {
    $container.isotope({
        // options
    });
});


$('#filters').on( 'click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({ filter: filterValue });
});

我已在css中将divexp显示设置为'none'。

Answer 1

 $(document).ready(function(){

    $('#filters').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
   $(".divexp").show();
$container.isotope({ filter: filterValue });
     });
  }

将show / hide添加到现有的数据过滤功能Jquery

1 个答案: