Question

我有以下HTML。

<div>
   <img class="foo">
   <a href="#" onClick="changeImage(this, param1, param2)">sth</a>
</div>

我想在用户点击链接时更改图片类（删除foo，添加bar）。但是，我无法为jquery写下正确的选择器。

我也不确定我是否真的需要将this传递给函数。

function changeImage(link, param1, param2) {

    //Following line does not work
    $(link).parent('div img').removeClass("foo").addClass("bar");

}

Answer 1

你也不需要将-this-传递给你的onclick，我们甚至不会在函数中影响它，我们无论如何都可以抓住它。

function changeImage(link, param1, param2) {

    //Following line does not work
    //$(link).parent('div img').removeClass("foo").addClass("bar");

    $(this).closest('div').find('img').removeClass('foo').addClass('bar');
    return false; // stops the <a> link from doing anything else
}

旁注：尝试永远不要在任何DOM元素上使用任何onclick / onmouseover / etc事件，每个元素在旧版浏览器（IE）中单独创建一个脚本块，并在页面上有数百/数千个元素，它可能会降低性能。

使用.click()，.on()，无论您支持哪种版本的jQuery版本。

Answer 2

你可以这样做

$(link).parent('div img:first').removeClass("foo").addClass("bar");

Answer 3

假设您的标记仍然如您在问题中所示：

$(link).prev().removeClass("foo").addClass("bar");

.prev()方法将选择前一个兄弟，在您的情况下是img元素。

Answer 4

试试这段代码：

   function changeImage(link, param1, param2) {
        $(this).closest('div').find('img:first').removeClass('foo').addClass('bar');
        return false;
    }

Answer 5

$(link).prev('img').removeClass("foo").addClass("bar");

OR

$(link).siblings('img').removeClass("foo").addClass("bar");

Answer 6

你可以试试这个

JS CODE

function changeImage(link, param1, param2) {
    $(link).siblings().removeClass('foo').addClass('bar');
}

从div中选择第一个图像

6 个答案: