無法在jquery上切換圖片

我是這個論壇的新手，但我會盡我所能做到儘可能具體。無法在jquery上切換圖片

我試圖通過嘗試更改src-attr來嘗試切換圖像，似乎遇到了一些麻煩。在jQuery中）。我猜（=知道）該問題在我的jQuery代碼中的dropevents中。我的目標是將拖拉機拖到一個寬的容器上，裏面有5個小容器。當拖動器被放在其中一個較小的容器上時，我希望它改變它位於整個拖動元素上方的圖像。

我試圖做一個演示：http://jsfiddle.net/yuj9apyy/11/。在這裏，它並不完美，因爲這些職位和東西，但你可以明白！另外，我沒有成功補充說，要改變形象...

下面是相關的HTML：

//This is the image I would like to change the src-attr. from. 
    <div id="grafiek"> 
     <img src="Afb/GrafiekDord2010.png" id="grafiekDord2010"/> 
    </div> 

//This is the bigContainer, container 5 smaller containers, some numbers along it (these 
are not of any influence), and a dragger. 

    <div id="bigContainer"> 
     <span id="container1" class="drop1"></span><span id="container2" class="drop1"></span><span id="container3" class="drop1"></span><span id="container4" class="drop1"></span><span id="container5" class="drop1"></span><p id="jaartallen">2010 2015 2020 2025 2030</p> 
     <div id="dragger"></div> 
    </div>

所有位置和寬度/高度是在CSS-code.All規定這些跨度容器彼此相鄰放置，並精確填充bigContainer的空間。拖動器本身是一個小的黑色容器，並且在bigContainer的寬度範圍內可水平拖動。

下面是jQuery。現在我必須說我對此非常陌生，並且通過搜索教程的一些網站。這可能是我在正確的道路上，但是完全錯誤並不會讓我感到驚訝......

$(document).ready(function(){ 

$("#bigContainer") 
    .delegate('#dragger',"draginit", function(ev, drag){ 
    ev.preventDefault(); 
    drag.horizontal(); 
    drag.limit($("#bigContainer")); 
    drag.step(34.4,$("#bigContainer"),"x") 
    }) 
//This above actually works perfectly! Took some efford... 

$("#bigContainer") 
    .delegate('.drop1', "dropon", function(ev, drop, drag) { 
     $('#grafiekDord2010').attr("src").replace("Afb/GrafiekDord2015.png", ".png"); 
     $(this).attr("src", src); 
    }) 
//The class drop1 being delegated to, is the class given to every small container. 
}); 
//And this doesn't work...at all.

我覺得CSS並不重要。如果是這樣，讓我知道，我會發布它。

在此先感謝您的任何答案！我很欣賞每個人爲了幫助某人而付出的努力:)如果您需要更多的代碼/信息，請告訴我！

來源

2014-11-08 Kim Leeuwesteijn

順便說一句，有一個選項可以包含一個可運行的代碼片段。如果你[編輯]這個問題，並添加一個演示，它會更容易幫助。 – 2014-11-08 09:54:32

謝謝，我知道了！ – 2014-11-08 10:40:16

這可能不是一個完整的答案，但指出了一些特定的問題。

1）在你的dropon - 回調函數中，你得到的src屬性爲$('#grafiekDord2010')，但是不要將它存儲在某個地方，所以它一下子丟失了。 2）我不知道關鍵字this指向什麼元素，但確切地說不是$('#grafiekDord2010')。所以，如果你想改變的SRC的功能應該是這樣的：

$("#bigContainer").delegate('.drop1', "dropon", function(ev, drop, drag) { 
    var grafiek = $('#grafiekDord2010'), 
     newsrc = grafiek.attr("src").replace("Afb/GrafiekDord2015.png", ".png"); 
    grafiek.attr("src", newsrc); 
})

來源

2014-11-08 15:56:47

嗯，很多昨天搜索之後，我想通了自己。事實證明，這比TJ的解決方案更容易。（'＃'bigcontainer'）。delegate（'＃container1'，'dropover'，function（ev，drop，drag）{（'。grafiek1'）。attr（'src'，'Afb/GrafiekDord2010.png'）; }）

因此，bigcontainer委託給它的小容器，我給了班級，但也是ID。不幸的是，委託給班級並沒有辦法。然後，當它拖放（/拖動）在容器1上時，它按類搜索圖像並將src.attr更改爲另一個圖像！

完美地工作。

來源

2014-11-09 11:30:29

無法在jquery上切換圖片

回答

相關問題