我正在尝试为具有通过外部 JS/CSS 包含的外部 TripAdvisor 小部件的网站创建更多移动响应点击目标。我想我会使用 jQuery 将默认的外部 CSS 类替换为在移动设备的媒体查询中定义的自定义本地 CSS 类。
这是包含在检查器中的 TripAdvisor 小部件及其呈现代码的屏幕截图。
我需要用 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 页脚小部件控件中,看起来像这样,但它似乎没有进行替换。不过,当我在 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&uniq=278&locationId=10438680&lang=en_US&display_version=2"></script>
<script>
$( document ).ready(function() {
$("widEXCLINK").removeClass("widEXCLINK");
$("widEXCLINK").addClass("tripAdvisorMobile");
});
</script>
最佳答案
您处理解决方案的方式存在 2 个问题。
$("widEXCLINK")
应该是
$(".widEXCLINK")
如果您不包含 .
sizzle 引擎将尝试按名称查找元素 widEXCLINK
第二个问题是特异性,
.tripAdvisorMobile {
特异性 ---> 0 0 1 0
应该比
有更好的特异性#CDSWIDEXC.widEXC .widEXCLINK
特异性 ---> 0 1 2 0
由于第二个具有更高的特异性,因此将应用该样式。要应用样式,您必须改为执行此操作。
@media only screen and (max-device-width: 480px) {
`#CDSWIDEXC.widEXC .widEXCLINK.tripAdvisorMobile {` specificity ---> 0 1 3 0
并且不再需要任何 jQuery 来摆脱这个类。
关于javascript - jQuery 在外部 JS 加载后替换外部 CSS 中的 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40195629/