如何使默认数据过滤器仅在加载时过滤。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 以获得完整的实现：单击此处