li要素をループし、クラスをチェックしてCSSを設定します

Question

こんにちは、私はjquery関数に問題があります。私は自分のワードプレスサイトにアカウントメニューを持っています。クラスis-active（表示可能なメニューエントリ）を持つ要素の不透明度を1に設定します。特定の要素（bsp：My Orders）をクリックすると、クラス名が取得されますis-activeがアクティブですが、不透明度が変更されないという問題があります。別の要素（bsp：My Account）をクリックすると、クリックした最後のもの（My Orders）が不透明度を変更します（ただし、遅くなります）。これはとても狂っているし、私は考えていない。

私のHTMLコード：

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

私のjQueryコード：あなたは不透明度aのインラインルールを削除することができます

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

Answer 1

NDクラスこのPHPが関係しているどのように

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

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

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