Issue
I've been working on a filter plugin using HTML5's data-* attribute, but jQuery (or something) keeps emptying the wrong div.
Basically I have two divs with different classes. '.gallery-source' is the class of the div with ALL of the content (and the 'display' property is set to 'none' value, so it doesn't show up in the document); while '.gallery' on the first hand is empty but then given the contents of '.gallery-source'.
Once the user has selected options to filter in the dropdowns (an unordered list of items, with links that have data-* values matching some of the contents of '.gallery-source' data-* values), the '.gallery' div is emptied and then each matching content (same data-* values as set in the dropdowns) of '.gallery-source' is appended inside '.gallery'.
The code looks something like this:
// 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));
});
});
The document initially looks like this (both '.gallery' and '.gallery-source' are populated):
<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>
But after selecting an option in one of the filter dropdowns, '.gallery-source' is empty :(
What am I missing here? I think I'm going crazy!
Anyway, any help will be much appreciated.
Solution
.append
moves the entire node from .gallery-source
to .gallery
. You want to do this instead:
$(this).clone().appendTo('.works-content .gallery');
You can read about .clone()
here.
Answered By - elixenide
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.