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(){
    // ...
});

或+ adjacent selector。