javascript - 从 div 中选择第一个 img

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");

或者

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

Answer 6

你可以试试这个

JS代码

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