javascript - 如果同级元素 hasClass，则在悬停时执行某些操作

Question

我有一个列表，每个列表都包含一个链接和一个图像。有些图像具有其他图像没有的类别。

<ul>
  <li>
    <a>link 1</a>
    <img src="http://foo.com/" />
  </li>
  <li>
    <a>link 2</a>
    <img src="http://foo.com/" />
  </li>
  <li>
    <a>link 3</a>
    <img src="http://foo.com/" class="myClass" />
  </li>
</ul>

我想在这些链接悬停时执行某些操作，但前提是关联的图像具有该类。

这是我目前正在尝试的:

$('ul li a').hover(
    function() {
        if ($(this).siblings('img').hasClass('.myClass')) {
                console.log('it has the class');
        }
});

正确的语法是什么？

Answer 1

您不应将 . 传递给 hasClass 方法，请将其删除。

if ($(this).siblings('img').hasClass('myClass')) {

如果类不是动态添加/删除的，您还可以使用.filter()方法:

$('ul li a').filter(function() {
    // return $(this).siblings('img').hasClass('myClass');
    return this.nextElementSibling.className.indexOf('myClass') > -1;
}).hover(function(){
    // ...
});

或+相邻选择器。