從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 
} 

在一個側面說明：嘗試從未使用任何的onclick /的onmouseover /任何DOM元素等事件，每一個單獨創建舊版瀏覽器的腳本塊（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代碼

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