我一直在使用HTML5的data- *属性处理过滤器插件,但是jQuery(或其他东西)一直在清空错误的div。
基本上我有两个不同类的div。 '名为.gallery源'是包含所有内容的div类(并且'显示'属性设置为' none'值,因此它不会显示在文档中);虽然' .gallery'第一方面是空的,但后来给出了' .gallery-source'的内容。
一旦用户选择了要在下拉列表中过滤的选项(无序的项目列表,其中包含的数据 - *值与某些内容相匹配,这些内容符合> .gallery-source' data- *值),' .gallery' div被清空,然后每个匹配的内容(相同的数据 - *下拉列表中设置的值)' .gallery-source'被附加在' .gallery'。
之内代码看起来像这样:
// Append everything from .gallery-source to .gallery in order to show ALL work (filters may be applied later)
var gallerySource = $('.works-content .gallery-source').html();
$('.works-content .gallery').html(gallerySource);
// Attribute filtering for all work inside .gallery
$('ul#artist-dropdown li a, ul#technique-dropdown li a, ul#material-dropdown li a').on('click', function() {
// Get selected filter on form
var artistFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.artist > span').attr('data-filter-artist');
var techniqueFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.technique > span').attr('data-filter-technique');
var materialFilterValue = $('.works-content .filter-dropdowns .dropdown-wrapper a.button.material > span').attr('data-filter-material');
// Empty .gallery in order to fill it later with filtered work
$('.works-content .gallery').empty();
// Get filtered elements and append them to .gallery
$('.single-work[data-artist~="' + artistFilterValue + '"][data-technique~="' + techniqueFilterValue + '"][data-material~="' + materialFilterValue + '"]').each(function(){
$('.works-content .gallery').append($(this));
});
});
该文档最初看起来像这样(两个' .gallery'和' .gallery-source'已填充):
<div class="row works-content">
<div class="row">
<div class="small-12 medium-12 large-12 columns filter-dropdowns">
<div class="dropdown-wrapper">
Filtrar por:
<span class="dropdown-label">Artista</span>
<a href="#" data-dropdown="artist-dropdown" class="small button radius dropdown artist"><span data-filter-artist="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="artist-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-artist="all">Todos</span></a></li>
<li><a href="#"><span data-filter-artist="name-one">Name One</span></a></li>
<li><a href="#"><span data-filter-artist="name-two">Name Two</span></a></li>
</ul>
</div>
<div class="dropdown-wrapper">
Técnica:
<a href="#" data-dropdown="technique-dropdown" class="small button radius dropdown technique"><span data-filter-technique="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="technique-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-technique="all">Todos</span></a></li>
<li><a href="#"><span data-filter-technique="acrylic">Acrílico</span></a></li>
<li><a href="#"><span data-filter-technique="mixed-paper">Mixta sobre papel</span></a></li>
<li><a href="#"><span data-filter-technique="mixed-fabric">Mixta sobre tela</span></a></li>
<li><a href="#"><span data-filter-technique="oil">Óleo</span></a></li>
</ul>
</div>
<div class="dropdown-wrapper">
Soporte:
<a href="#" data-dropdown="material-dropdown" class="small button radius dropdown material"><span data-filter-material="all">Seleccionar</span> <i class="fa fa-chevron-down"></i></a><br>
<ul id="material-dropdown" data-dropdown-content="" class="f-dropdown">
<li><a href="#"><span data-filter-material="all">Todos</span></a></li>
<li><a href="#"><span data-filter-material="fabric">Tela</span></a></li>
<li><a href="#"><span data-filter-material="paper">Papel</span></a></li>
</ul>
</div>
<ul class="button-group filter-buttons">
<li class="active show-all"><a href="#" class="button">Todas</a></li>
<li class="show-available"><a href="#" class="button">Disponibles</a></li>
<li class="show-sold"><a href="#" class="button">Vendidas</a></li>
</ul>
</div>
</div>
<div class="row gallery-source">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código SUA1005</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
<div class="row gallery">
<div data-artist="name-one all" data-technique="oil all" data-material="paper all" class="small-12 medium-4 large-4 columns single-work available-work">
<a class="work-lightbox" href="img/work/name-one/3.jpg">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-one/3.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-one.png">
</a>
<a href="" class="artist-name">
<h2>Name One <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de Obra"</li>
<li>Código ejemplo</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Papel</li>
<li>Técnica: Óleo</li>
</ul>
</div>
<div data-artist="name-two all" data-technique="acrylic all" data-material="fabric all" class="small-12 medium-4 large-4 columns end single-work sold-work">
<a class="work-lightbox" href="img/work/name-two/5.jpg">
<img class="sold" src="img/work/sold.png">
<div class="work-image-wrapper">
<div class="work-image" style="background-image: url(img/work/name-two/5.jpg);"></div>
</div>
<img class="avatar" src="img/artists/name-two.png">
</a>
<a href="" class="artist-name">
<h2>Name Two <i class="fa fa-plus-circle"></i></h2>
</a>
<ul class="details">
<li class="title">"Título de obra"</li>
<li>Código ejempl5</li>
<li>Tamaño: 140 x 180 cm.</li>
<li>Soporte: Tela</li>
<li>Técnica: Acrílico</li>
</ul>
</div>
</div>
</div>
但是在其中一个过滤器下拉列表中选择了一个选项后,&#39; .gallery-source&#39;是空的:(
我在这里缺少什么?我想我疯了!
无论如何,我们非常感谢任何帮助。
答案 0 :(得分:2)
.append
将整个节点从.gallery-source
移至.gallery
。你想这样做:
$(this).clone().appendTo('.works-content .gallery');
答案 1 :(得分:0)
empty()的API doc也说:
...如果我们内部有任意数量的嵌套元素,它们也会被移除。
因此,$('.works-content .gallery').empty()
可能会删除超出您想要的内容。
编辑:修正拼写错误。