我希望在特定div上删除时切换图像。例如如果我有图像A，B，C的div;如果我把B放在B上，A会改为D，（D，B，C）;但如果我在A上弃A，A将改为E（E，B，C）。另外，如果我把D放在B上，D会改为F（F，B，C）。
到目前为止，这是我的代码......
我只编写了div A＆amp; B到目前为止，但我试图使用.switchClass; .addClass / .remove class;和.replace功能，但似乎没有一个对我有用。我不知道我是否正在实施那些错误或者其他地方是否存在根本性的错误。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch 2</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-
ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin:
10px 10px 10px 0; border:dotted; background-image: url(images/needle.jpeg);
background-size: 100px 100px; background-repeat: no-repeat;}
#droppable { width: 100px; height: 100px; padding: 0.5em; float: left; margin:
10px; border:dotted; background-image: url(images/rat.png); background-size:
100px 100px; background-repeat: no-repeat;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( '#draggable' ).css( "background-image" ).replace(/^url|[\(\)]/g, '');
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
</div>
<div id="droppable" class="ui-widget-header">
</div>
</body>
</html>
答案 0 :(得分：0)
好吧，我真的不明白你的问题，但我认为阅读jQuery UI的文档会对你很有帮助https://jqueryui.com/droppable/
编辑：好的，一旦你的图像可以删除，你就可以用这种方式为这个事件添加一个监听器：
$( "#MyImage" ).on( "drop", function( event, ui ) {$(this).atrr("src","newImage.jpg")} );
如果您的图像是以图像作为背景的div，并使用addClass removeClass方法，那会更好一些，但这对您而言。
答案 1 :(得分：0)
你使用了错误的css（）方法。 通过只使用一个参数，您返回属性的值，然后使用.replace（/ ^ url | [（）] / g，＆＃39;＆＃39;）;绝对没有任何东西（返回的值会随着你改变元素的价值而消失。你可能想要使用：
$( '#draggable' ).css( "background-image",$( '#draggable' ).css( "background-image" ).replace(/^url|[\(\)]/g, '') );
但这会使你的代码无法实现。我建议你改用类。