在jquery中從父函數獲取屬性值

我是jquery的新手，所以請原諒，好吧...一切！在jquery中從父函數獲取屬性值

我有一個'標題欄'由大約10個小縮略圖樣式的圖像組成。我希望能夠點擊這些圖像，然後更改較大的側欄圖像以顯示更大的版本。

其中，一些擺弄，我似乎通過使用圖像下面的代碼來管理：

<img src="header_images\small1.jpg" alt="alttext" class="hdrimage" id="1" data-bigimage="big1.jpg" /> 
<img src="header_images\thumb2.jpg" alt="alttext" class="hdrimage" id="2" data-bigimage="bigger2.jpg" />

等等

我再在的底部添加了一些jQuery代碼頁：

$(".hdrimage").bind('click', function() { 
    $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));  
})

我不知道如果這是做到這一點的最佳方式，但它似乎工作正常。

然後我認爲淡出舊圖像並淡入新圖像會很好，因此添加了一個.fadeOut（「slow」）;到點擊事件，但是在測試之前，它不會等待淡入淡出完成，然後再交換圖像。感謝谷歌，我發現我需要使用一個回調函數的.fadeOut實現這一點，所以我想是這樣的：

$(".hdrimage").bind('click', function() { 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage")); 
    }) 
})

但這不再工作。我相當肯定這是因爲$（this）現在指的是#swappyimage而不是被點擊的.hdrimage。我無法弄清楚如何引用我需要的縮略圖（.hdrimage）所需的屬性，點擊它可以觸發整個事件，所以希望能得到一些幫助。

我希望我解釋得很好！

來源

2011-08-10 Stevemid

您可以使用http://api.jquery.com/event.target/並通過函數將事件對象傳遞到需要它的位置。

$(".hdrimage").bind('click', function(clickEvent) { 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", "header_images/"+$(clickEvent.target).attr("data-bigimage")); 
    }) 
})

來源

2011-08-10 14:41:15 StuperUser

我可能是錯的，但我相信你需要從回調參數中刪除'clickEvent'。回調沒有參數，有一個會有問題，不是？ –

@kingjiv你說得對：（http://jsfiddle.net/StuperUser/XB83Q/），更新了答案。它與您現在的類似，但該變量是click處理函數的參數。 – StuperUser

是的！這工作謝謝你。好吧，它有一次我記得要添加fadeIn！（難倒了我一會兒!!） – Stevemid

只需保存你的背景下，

$(".hdrimage").bind('click', function() { 
    var self = this; 
    $("#swappyimage").fadeOut('slow', function() { 
    $("#swappyimage").attr("src", "header_images/"+$(self).attr("data-bigimage")); 
    }) 
})

來源

2011-08-10 14:41:16 Andrew

簡單地定義一個變量淡出之前撥打電話：

$(".hdrimage").bind('click', function() { 
    var newSrc = "header_images/"+$(this).attr("data-bigimage"); 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", newSrc); 
    }) 
})

另外，我假設你剛剛離開這個部分，但是你永遠不會褪色圖像回來。

來源

2011-08-10 14:42:59

是的，你是對的我想我會先淡出淡出。謝謝。 – Stevemid

在jquery中從父函數獲取屬性值

回答

相關問題