Recently, I have been aseked this question and found bit of good
solution as below:
I have a simple script that selects a class's and adds a class
of selected to it and remove it from all other 's with the similar
class. It all works perfectly, but I know that there has to be a
better way to write this out, I just can't figure it out.. Does it
involve something like this?
$('.adv-option-set a').click(function()
{
// if clicked item is selected then do nothing
if ($(this).hasClass('selected')){}
// otherwise deselect all and select just this one
else
{
$('.adv-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
$('.adv-option-set2 a').click(function()
{
// if clicked item is selected then do nothing
if ($(this).hasClass('selected')){}
// otherwise deselect all and select just this one
else
{
$('.adv-option-set2 a').removeClass('selected');
$(this).addClass('selected');
}
});
And below is HTML that has been provided
<article id="filter">
<ul id="filter-nav" class="option-set">
<li>Filter: </li>
<li><a data-categories="*" data-subid="all" class="selected">All</a></li>
<li><a data-categories="tubs-and-showers" data-subid="tubs-and-showers">Tubs & Showers</a></li>
<li><a data-categories="countertops" data-subid="countertops">Countertops</a></li>
<li><a data-categories="faucets" data-subid="faucets"><s>Faucets</s></a></li>
<li><a data-categories="cabinetry" data-subid="cabinetry"><s>Cabinetry</s></a></li>
<li><a data-categories="flooring" data-subid="flooring"><s>Flooring</s></a></li>
<li><a data-categories="toilets" data-subid="toilets"><s>Toilets</s></a></li>
<li><a data-categories="accessories" data-subid="accessories"><s>Accessories</s></a></li>
</ul>
<div id="advfilter" class="advfilter filter-nav hidden">
<ul id="tubs-and-showers" class="adv-option-set1">
<li><span class="small">ADV</span> Filter: </li>
<li><a data-categories="modular">Modular</a></li>
<li><a data-categories="custom">Custom</a></li>
</ul>
<ul id="countertops" class="adv-option-set2">
<li><span class="small">ADV</span> Filter: </li>
<li><a data-categories="marble">Marble</a></li>
<li><a data-categories="solid-surface">Solid Surface</a></li>
<li><a data-categories="laminate"><s>Laminate</s></a></li>
<li><a data-categories="granite"><s>Granite</s></a></li>
</ul>
<ul id="faucets" class="adv-option-set3">
<li><span class="small">ADV</span> Filter: </li>
<li><a data-categories="">Coming Soon</a></li>
<li><a data-categories="">Coming Soon</a></li>
</ul>
<ul id="cabinetry" class="adv-option-set4">
<li><span class="small">ADV</span> Filter: </li>
<li><a data-categories="">Coming Soon</a></li>
<li><a data-categories="">Coming Soon</a></li>
</ul>
</div>
</article>
Here is the solution:
$('[class^=adv-option-set] a').click(
function()
{
$(this).addClass('selected');
$('[class^=adv-option-set] a').not(this).removeClass('selected');
}
);
It is very simple but most effective and reduce code redundancy
as well.