I want to give css to whichever li tag is selected, but I'm stuck somewhere, can you help?
Following my code :
HTML
<ul class="product-categories">
<li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
<ul class="children">
<li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
<li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
</ul>
</li>
<br>
<li class="cat-item cat-item-21"><a href="#">Test</a></li>
<br>
<li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
<ul class="children">
<li class="cat-item cat-item-39"><a href="#">Example</a></li>
</ul>
</li>
</ul>
CSS
body{
width:180px;
}
a{
text-decoration:none;
}
.selected{
background-color:grey;
}
jQuery
let cat = jQuery('[class^=cat-item]');
jQuery(cat).each(function() {
jQuery('.cat-item a').click(function(){
jQuery('li .cat-item a').addClass('selected');
});
});
https://jsfiddle.net/justfeel/gwo45pnu/17/
CodePudding user response:
there is your solution
$('.cat-item a').click(function(){
$('.cat-item a').removeClass('selected');
$(this).addClass('selected');
});
CodePudding user response:
To do what you require use the Event object passed to the event handler as an argument to reference the element which was clicked. From there you can remove the class from all other elements while adding it to the current one.
Also note there's a couple of other issues in your code:
- jQuery 1.7 is very outdated and needs to be updated. At time of this answer the most recent version is 3.6
- You don't need the
each()
call. jQuery will automatically apply any methods you call to every element in the set (with some exceptions that aren't relevant here) - Remove the
<br />
tag between yourli
as it's invalid HTML. If you want to increase the margin between theli
use CSS. - You can alias
jQuery
within the document.ready event handler so your code becomes less verbose.
With all that said, try this:
jQuery($ => {
let $a = $('.product-categories li a');
$('.cat-item a').on('click', e => {
$a.removeClass('selected');
$(e.target).addClass('selected');
});
});
body { width: 180px; }
a { text-decoration: none; }
.selected { background-color: grey; }
.product-categories > li { margin-bottom: 1em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul class="product-categories">
<li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
<ul class="children">
<li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
<li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
</ul>
</li>
<li class="cat-item cat-item-21"><a href="#">Test</a></li>
<li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
<ul class="children">
<li class="cat-item cat-item-39"><a href="#">Example</a></li>
</ul>
</li>
</ul>
CodePudding user response:
The following example will solve your problem.
jQuery('.cat-item a').click(function(){
jQuery('.cat-item a').removeClass('selected');
jQuery(this).addClass('selected');
});
body{
width:180px;
}
a{
text-decoration:none;
}
.selected{
background-color:grey;
}
<ul class="product-categories">
<li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
<ul class="children">
<li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
<li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
</ul>
</li>
<br>
<li class="cat-item cat-item-21"><a href="#">Test</a></li>
<br>
<li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
<ul class="children">
<li class="cat-item cat-item-39"><a href="#">Example</a></li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>