javascript - 使用 jquery 的选择器

Question

我正在尝试使用 royal slide。我想根据图像更改更改 ID。 我尝试了一些东西，比如使用 translateX 值，但这对我来说真的很难，因为我对 jQuery/JavaScript 没有太多经验。所以当我看到这个时，我想到了另一个想法:

<div class="rsNav rsBullets">
   <div class="rsNavItem rsBullet rsNavSelected"><span></span></div>
   <div class="rsNavItem rsBullet"><span></span></div>
   <div class="rsNavItem rsBullet"><span></span></div>
</div>

我认为最好的选择是像这样使用 :nth-child 选择器:

function colorfondo(){
if($('.RsNav:nth-child(1)').hasClass("RsNavselected")) {
   console.log('works!');
}

但是没用。

编辑 可能是我没解释好。我只想要这样的东西:

if (the first child has the rsNavSelected) { do something.}
elseif the second child has the rsNavSelected) { do something.} elseif the third child has the rsNavSelected { do something.} 

重新编辑 我成功了，这就是我的职责 函数 colorfondo(){

if($('.rsNav div:first-child').hasClass("rsNavSelected")) {
console.log('rojo!');
} 
else if($('.rsNav div:nth-child(2)').hasClass("rsNavSelected")) {
console.log('azul!');
} 
else if($('.rsNav div:nth-child(3)').hasClass("rsNavSelected")) {
console.log('gris!');
} 
}

现在我需要这个功能不会停止并始终保持工作状态，有什么建议吗？

Answer 1

RsNavselected 不等于 rsNavselected 并且 RsNav 不是 rsNav。

HTML 属性值区分大小写，但 HTML 标记名称和属性不区分大小写。

使用:

if($('.rsNav:nth-child(1)').hasClass("rsNavSelected")) {
   console.log('works!');
} 

另外，如果你想得到 first-child 使用 .children() 和 .first() 方法:

if($('.rsNav').children().first().hasClass("rsNavSelected")) {
   console.log('works!');
}