循环遍历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

＆＃13;

＆＃13;

li{
  opacity:0.5;
  }
li.active{
  opacity:1;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;