jQuery addClass 通过 CodePen 上的函数答案

【问题标题】：JQuery addClass through function on CodePenjQuery addClass 通过 CodePen 上的函数
【发布时间】：2017-10-12 00:10:00
【问题描述】：

我确定这是一个明显而愚蠢的错误，但我似乎无法在函数调用中添加类：

https://codepen.io/Yonkai/pen/WZyMJw?editors=1111

问题出在JS部分第28行：

 function smove(){
  $(".creatures p:nth-child(2)").addClass("selected");
}

当我调用该函数时，它不会像我期望的那样在 html 中更改“Rodan”，在这里（未从 pug 编译），我期望它通过添加类变成黄色：

.selected{
  color:yellow;
}

进入：

<div class="creatures">
  <p class="bodytext">????Mothra????</p>
  <p class="bodytext">????Destroyah????</p>
  <p class="bodytext">????Rodan????</p>
  <p class="bodytext">????Kim Jung Un????</p>
  <p class="bodytext">????King Ghidora????</p>
  <p class="bodytext">????Godzilla????</p>
</div>

【问题讨论】：

When I call the function - 你不调用函数
我是通过控制台调用它的。你可以这样调用全局范围的函数。
div .bodytext 比 .selected 具有更高的特异性 - 啊，已经发布了一个答案说，没有看到答案

标签： javascript jquery html css pug

【解决方案1】：

您需要让 css 中的 .selected 选择器更具体，例如 div .selected

目前div .bodytext 比.selected 拥有更多微博

Update Codepen

您可以阅读有关 css 特异性here

【讨论】：

这似乎是问题所在！

【解决方案2】：

在某处调用函数

 smove();

function smove(){
  $(".creatures p:nth-child(2)").addClass("selected");
}

.selected{
  color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="creatures">
  <p class="bodytext">?Mothra?</p>
  <p class="bodytext">?Destroyah?</p>
  <p class="bodytext">?Rodan?</p>
  <p class="bodytext">?Kim Jung Un?</p>
  <p class="bodytext">?King Ghidora?</p>
  <p class="bodytext">?Godzilla?</p>
</div>

【讨论】：

这对 CodePen 有用吗？它对我不起作用。将其添加到脚本页面或通过控制台调用。