无法在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上切换图片

回答

相关问题