ItsOdi ItsOdi - 16 days ago 8
CSS Question

Loop over li elements, check class and set css

Hi there I have a problem with a jquery function. I have a account menu on my wordpress site. I want to set the opacity to 1 of the element who has the class

is-active
(the visible menu entry). When I click on a specific element (bsp: My Orders) it gets the class name
is-active
is active but the problem is that the opacity dont change. When I click on another element (bsp: My Account) the last one (My Orders) which I clicked change the opacity (but to late). This is so crazy and I dont have any idea.

My HTML Code:



<ul>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
<a href="https://mywebsite.com/en/my-account/" style="opacity: 0.5;" data-loaded="true">My Account</a> <!--This should be opacity: 1 because of is-active-->
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--subscriptions">
<a href="https://mywebsite.com/en/my-account/subscriptions/" style="opacity: 0.5;">Subscriptions</a>
</li>
<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders active">
<a href="https://mywebsite.com/en/my-account/orders/" style="opacity: 1;" data-loaded="true">My Orders</a> <!--This should be opacity: .5-->
</li>
</ul>





My jQuery code:



$(document).ready(function() {
$('.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link').each(function(i, obj) {
if ($(this).hasClass('is-active')) {
var myaccountlink = $(this).attr('class');
myaccountlink = myaccountlink.replace(/\s+/g, '.');
$('.' + myaccountlink).find('a').css('opacity', '1', '!important');
} else {
$(this).find('a').css('opacity', '.5');
}
});
});




Answer

you can remove inline rules for opacity and apply css based on classes

li{
  opacity:0.5;
  }
li.active{
  opacity:1;
  }
<ul>
    	<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard is-active active">
    		<a href="https://mywebsite.com/en/my-account/"  data-loaded="true">My Account</a> <!--This should be opacity: 1 because of is-active-->
    	</li>
    	<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--subscriptions">
    		<a href="https://mywebsite.com/en/my-account/subscriptions/" >Subscriptions</a>
    	</li>
    	<li class="woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders active"> 
    		<a href="https://mywebsite.com/en/my-account/orders/"  data-loaded="true">My Orders</a> <!--This should be opacity: .5-->
    	</li>
    </ul>

$(document).ready(function() { 
	$('.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link').each(function(i, obj) {
		if ($(this).hasClass('is-active')) {
  			var myaccountlink = $(this).attr('class');
  			myaccountlink = myaccountlink.replace(/\s+/g, '.');
  			$('.' + myaccountlink).find('a').css('opacity', '1', '!important');
  		} else {
  			$(this).find('a').css('opacity', '.5');
  		}
	});
});

Comments