dongzanghong4379
dongzanghong4379
2016-11-19 14:57
浏览 88

循环遍历li元素,检查类并设置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');
        }
    });
});

</div>

图片转代码服务由CSDN问答提供 功能建议

您好我的jquery函数有问题。 我的wordpress网站上有一个帐户菜单。 我想将不透明度设置为具有类 is-active (可见菜单条目)的元素中的1。 当我点击一个特定的元素(bsp:我的订单)时,它会获得类名 is-active 处于活动状态,但问题是不透明度不会改变。 当我点击另一个元素(bsp:我的账户)时,我点击的最后一个(我的订单)会改变不透明度(但是到了晚期)。 这太疯狂了,我什么都不知道。

我的HTML代码:

 &lt; ul&gt; 
 
&lt; li class =”woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link  -  dashboard is-active active“&gt; 
 
&lt; a  href =“https://mywebsite.com/en/my-account/”style =“opacity:0.5;”  data-loaded =“true”&gt;我的帐户&lt; / a&gt;  &lt;! - 这应该是不透明的:1因为是活跃的 - &gt; 
 
&lt; / li&gt; 
 
&lt; li class =“woocommerce-MyAccount-navigation-link woocommerce-MyAccount- 导航链接 - 订阅“&gt; 
 
&lt; a href =”https://mywebsite.com/en/my-account/subscriptions/“style =”opacity:0.5;“&gt;订阅&lt; / a&gt  ; 
 
&lt; / li&gt; 
 
&lt; li class =“woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link-orders active”&gt;  
 
&lt; a href =“https://mywebsite.com/en/my-account/orders/”style =“opacity:1;”  data-loaded =“true”&gt;我的订单&lt; / a&gt;  &lt;! - 这应该是不透明的:.5  - &gt; 
 
&lt; / li&gt; 
 
&lt; / ul&gt;   
 
  \  r 
  
 
 
 
 

我的jQuery代码:

  $(document).ready(function(){
 
 $('。woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link')。  (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'); 
 
} 
 
}  ); 
 
});   
 
  
 
  
 
 
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • duanrebo3559
    duanrebo3559 2016-11-19 15:16
    已采纳

    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>
    
    点赞 评论

相关推荐