外部JSロード後に外部CSSのCSSクラスを置き換えるjQuery

Question

外部JS/CSSを介して外部トリップウィジェットが含まれているWebサイトに対して、よりモバイルレスポンスなタップターゲットを作成しようとしています。私はjQueryを使って、デフォルトの外部CSSクラスを、モバイルデバイスのメディアクエリで定義されたカスタムローカルCSSクラスに置き換えると考えました。

インスペクタで表示されている、レンダリングされたコードとともに、含まれるトリップウィジェットのスクリーンショットです。

私はjQueryを使って交換する必要があり、外部CSSクラスは、 "widEXCLINK" と呼ばれています。その外部CSSクラスを置き換えるクラスは、 "tripAdvisorMobile"と呼ばれます。

/* Give a little extra margin and padding on iPhone screens [portrait + landscape] */ 
@media only screen and (max-device-width: 480px) { 
    /* Give a little extra padding in the TripAdvisor widget to separate tap targets on mobile */ 
    .tripAdvisorMobile { 
     font-style: normal; 
     font-size: 107.5%; 
     font-family: Arial,Verdana,"Bitstream Vera Sans",Helvetica,sans-serif; 
     margin: 0; 
     padding: 0 9px 9px 9px; 
     border: none; 
     font-weight: normal; 
     text-decoration: underline; 
     outline: none; 
     color: #000; 
    } 
} 

私のjQueryのコードは、WordPressのフッターのウィジェットコントロールに座っていると、このように見えますが、それは交換をやっているようには見えません。インスペクタで手動で置き換えを行うと、それは機能します。私はここで何が欠けていますか？ DEVサイトへのリンクは、あなたが解決に近づいている方法との2問題がありますhttp://dev-osiris-tours.pantheonsite.io/

<div id="TA_excellent278" class="TA_excellent"> 
<ul id="2X2ZQ1k7" class="TA_links GF8D0I0EbFmi"> 
<li id="CR629jdXpi3p" class="ag0WGEV"> 
    <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://static.tacdn.com/img2/widget/tripadvisor_logo_115x18.gif" alt="TripAdvisor" class="widEXCIMG" id="CDSWIDEXCLOGO"/></a> 
</li> 
</ul> 
</div>  

<script src="https://www.jscache.com/wejs?wtype=excellent&amp;uniq=278&amp;locationId=10438680&amp;lang=en_US&amp;display_version=2"></script> 

<script> 
$(document).ready(function() { 
    $("widEXCLINK").removeClass("widEXCLINK"); 
    $("widEXCLINK").addClass("tripAdvisorMobile"); 
}); 
</script> 

Answer 1

です。

$("widEXCLINK") 

はあなたが.シズルエンジンが含まれていない場合は

$(".widEXCLINK") 

ことになっている

、第二の問題は特異である widEXCLINK

名前で要素を探すためにしようとします

.tripAdvisorMobile {特異性---> 0 0 1 0

つのスタイルが適用されることは、より高い特異性を有しているので

は---> 0 1 2 0

#CDSWIDEXC.widEXC .widEXCLINK特異性よりも良好な特異性を有するべきです。スタイルを適用するには、代わりにこれを行う必要があります。

@media only screen and (max-device-width: 480px) { 
    `#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {` specificity ---> 0 1 3 0 

クラスを削除するために、もうjQueryは必要ありません。