循环遍历li元素，检查类并设置css

Question

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');
        }
    });
});

</div>

Answer 1

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');
        }
    });
});

</div>