javascript - 遍历 li 元素，检查类并设置 css

Question

您好，我有一个 jquery 函数的问题。我的 wordpress 网站上有一个帐户菜单。我想将具有 is-active 类(可见菜单项)的元素的不透明度设置为 1。当我点击一个特定的元素(bsp:我的订单)时，它得到类名 is-active 是事件的，但问题是不透明度没有改变。当我单击另一个元素(bsp:我的帐户)时，我单击的最后一个元素(我的订单)更改了不透明度(但很晚)。这太疯狂了，我不知道。

我的 HTML 代码:

<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>

我的 jQuery 代码:

$(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 1

您可以删除不透明度的内联规则并根据类应用 css

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