在外部JS加载后，jQuery将在外部CSS中替换CSS类

Question

我正在尝试为通过外部JS / CSS包含外部TripAdvisor小部件的网站创建更多移动响应式点击目标。我想我会使用jQuery将默认外部CSS类替换为移动设备媒体查询中定义的自定义本地CSS类。

这是所包含的TripAdvisor小部件的屏幕截图，以及在Inspector中查看的呈现代码。

我需要用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页脚Widget控件中，看起来像这样，但它似乎没有进行替换。当我在Inspector中手动进行替换时，它可以工作。我在这里错过了什么？开发站点的链接是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")

如果您不包含. sizzle引擎，则会尝试按名称widEXCLINK

查找元素

第二个问题是特异性，

.tripAdvisorMobile {特异性---＆gt; 0 0 1 0

应具有比

更好的特异性

#CDSWIDEXC.widEXC .widEXCLINK特异性---＆gt; 0 1 2 0

由于第二个具有更高的特异性，因此将应用这些样式。要应用这些样式，您必须这样做。

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

并且不再需要任何jQuery来摆脱这个类。