Jquery 选择器——this vs id vs class

Question

我有一个外部 div，当我将鼠标悬停在它上面时，我希望第二个子元素在 jquery 中切换一个类。我相信我已经关闭了代码，我认为我遇到的问题与我选择的内容有关，但没有得到正确的选择器，因为我不完全理解 id、class 或 this 之间的区别。谢谢你的帮助! (我不能将它们全部分配给一个类，因为会有多个相同代码块)

<script>
function color_toggle(id){

     selection = $(this) + ' img:nth-child(2)';
     $( selection ).toggleClass("grey");
}
</script>



<div class="row-fluid supplier_new" onmouseover="color_toggle(this);" onmouseout="color_toggle(this);">
        <div class="span3 supplier_logo">
             <h4>APV Manufacturing</h4>
            <img class="grey" src = "img/suppliers/55555/logo.png" />
        </div>

        <div class="span1" style="padding-left:15px;">
            <img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-verified.png">
            <br><br>
            <img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-preferred.png">
        </div>
    </div>

Answer 1

由于您将 this 作为 id 参数传递给函数，因此您需要 $(id)。

但是你可以这样调用它:

onmouseover="color_toggle($(this))"

只需使用 id.find("img:eq(2)").toggleClass("gray")

或者你可以这样做:

onmouseover="color_toggle.call(this);"

还有你的 JS:

function color_toggle() {
    $(this).find("img:eq(2)").toggleClass("gray");
}

或者你可以只使用 CSS:

.someclass:hover img:nth-child(2) {
    /* apply style here */
}