如何使默认数据过滤器仅在加载时过滤 .barcoffeshop 而不是所有帖子

Question

默认情况下会打印所有 div，我希望在加载时仅打印 barcoffeshop 类。如何使用 js/jquery 进行操作以仅显示 barcoffeshop

            <li class="filter" data-filter="all">All</li>
                <li class="filter active" data-filter=".apartment">Appartment</li>
                <li class="filter" data-filter=".barcoffeshop">Bar Coffe Shop</li>
                <li class="filter" data-filter=".hotel">Hotel</li>
                <li class="filter" data-filter=".pharmacy">Pharmacy</li>
                <li class="filter" data-filter=".vila">Vila</li>
                <li class="filter" data-filter=".office">office</li>

> class apartment below

                <div
                  class="col-md-3 col-sm-6 mix apartament"
                  style="display: inline-block"
                  data-bound=""
                >
                  <figure class="project-item imghvr-flip-vert">
                    <img
                      src="assets/img/imazhe/apartamente/apartment/BEDROOM 1 800X500.jpg"
                      alt=""
                    />
                    <figcaption>
                      <div class="overlay">
                        <a href=""><h3>Apartament</h3></a>
                        <a href=""><i class="fa fa-external-link"></i></a>
                        <a
                          href="assets/img/imazhe/apartamente/apartment/BEDROOM 1 800X500.jpg"
                          class="work-popup"
                        >
                          <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>

   > class bacoffe shop below
                <!-- work item -->
                <div
                  class="col-md-3 col-sm-6 mix barcoffeshop"
                  style="display: inline-block"
                  data-bound=""
                >
                  <figure class="project-item imghvr-flip-vert">
                    <img
                      src="assets/img/imazhe/Bar Caffe Shop/BAR CAFE 1 800X500.jpg"
                      alt=""
                    />
                    <figcaption>
                      <div class="overlay">
                        <a href=""><h3>Bar Coffe</h3></a>
                        <a href=""><i class="fa fa-external-link"></i></a>
                        <a
                          href="assets/img/imazhe/Bar Caffe Shop/BAR CAFE 1 800X500.jpg"
                          class="work-popup"
                        >
                          <i class="fa fa-arrows-alt" aria-hidden="true"></i>
                        </a>
                      </div>
                    </figcaption>
                  </figure>
                </div>

有什么办法只在加载时删除所有 div，以便显示 barcoffeshop

Answer 1

Select data-filter 作为 barcoffeeshop 的列表项，并在页面加载时使用 javaScript 对其调用 .focus()。

完整实现请参考CodePen：Click here

如何使默认数据过滤器仅在加载时过滤 .barcoffeshop 而不是所有帖子

How to make on default data-filter to filter on load only .barcoffeshop not all the posts

javascript

html

css

data-filtering