jquery - jQuery拖放问题 - div id和类依赖
问题描述
我有两个可拖动的图像,1 个男人和 1 个女人。当我将这个人拖入两个 div 之一时,我想隐藏那里的图像并显示一个新的特定图像。当我将女人拖到同一个 div 中时,我想隐藏现有图像并显示单独的不同图像。
上述示例有两个单独的 div。两个可拖动的图像到两个单独的 div 中。传入的图像将确定隐藏的内容和显示的内容。到目前为止,我的代码如下。它不工作。我知道 && 不合适。
$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'}); // makes top images draggable
$("#drop-area-contain").droppable({ //makes contents in div droppable
drop: function(e, ui) {
if((ui.draggable.attr("id")) == 'drag-woman') && (class == "quid-contain"){ //if id is dragged do this
$('.quid-empty').hide();
$('.quid-with-woman').show();
}else if((ui.draggable.attr("id")) == 'drag-woman') && (class == "hostile-contain"){ // else if dragged do this
$('.hostile-empty').hide();
$('.hostile-with-woman').show();
}else if((ui.draggable.attr("id")) == 'drag-man') && (class == "quid-contain"){ // else if dragged do this
$('.quid-empty').hide();
$('.quid-with-man').show();
}else if((ui.draggable.attr("id")) == 'drag-man') && (class == "hostile-contain"){ // else if dragged do this
$('.hostile-empty').hide();
$('.hostile-with-man').show();
}
}
});
解决方案
修复了 JSFiddle 中的语法错误。
$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'}); // makes top images draggable
$("#drop-area-contain").droppable({ //makes contents in div droppable
drop: function(e, ui) {
if(((ui.draggable.attr("id")) == 'drag-woman') && ($(this).hasClass("quid-contain"))){ //if id is dragged do this
$('.quid-empty').hide();
$('.quid-with-woman').show();
}else if(((ui.draggable.attr("id")) == 'drag-woman') && ($(this).hasClass("hostile-contain"))){ // else if dragged do this
$('.hostile-empty').hide();
$('.hostile-with-woman').show();
}else if(((ui.draggable.attr("id")) == 'drag-man') && ($(this).hasClass("quid-contain"))){ // else if dragged do this
$('.quid-empty').hide();
$('.quid-with-man').show();
}else if(((ui.draggable.attr("id")) == 'drag-man') && ($(this).hasClass("hostile-contain"))){ // else if dragged do this
$('.hostile-empty').hide();
$('.hostile-with-man').show();
}
}
});
https://jsfiddle.net/svz0bax5/
编辑
if
我已经为和else if
部分的条件添加了一个关闭。此外,不是比较不存在的class
变量,而是.hasClass()
调用。
编辑2
简化的 if-else:
$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'}); // makes top images draggable
$("#drop-area-contain").droppable({ //makes contents in div droppable
drop: function(e, ui) {
var idArray = ["drag-woman", "drag-man"];
if((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("quid-contain")) { //if id is dragged do this
$('.quid-empty').hide();
$('.quid-with-' + this.id.substring(5)).show();
}else if ((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("hostile-contain")){ // else if dragged do this
$('.hostile-empty').hide();
$('.hostile-with-' + this.id.substring(5)).show();
}
}
});
编辑3
在新的小提琴中:https ://jsfiddle.net/1btx6rfp/
我们可以看到解决方案:
$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'}); // makes top images draggable
$(".quid-contain, .hostile-contain").droppable({ //makes contents in div droppable
drop: function(e, ui) {
var idArray = ["drag-woman", "drag-man"];$('#drag-woman').draggable({helper:'clone'});
$('#drag-man').draggable({helper:'clone'}); // makes top images draggable
if((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("quid-contain")) { //if id is dragged do this
$('.quid-with-' + ui.draggable.attr("id").substring(5)).show().siblings().hide();
}else if ((idArray.indexOf(ui.draggable.attr("id")) + 1) && $(this).hasClass("hostile-contain")){ // else if dragged do this
$('.hostile-with-' + ui.draggable.attr("id").substring(5)).show().siblings().hide();
}
}
});
我们有一个简化的 if 和 drop 事件被正确处理。
推荐阅读
- android-studio - 广告无法在 android studio 中加载
- node.js - Mongoose 在没有 ref 的情况下查找其他集合
- javascript - 运行 mocha 测试无法从绝对路径中找到模块
- ios - 上一个任务结束后是否可以再次启动BackgroundTask
- regex - 带有正则表达式的 Spring Boot 中的 URL 匹配器
- java - 如何停止版本垃圾收集
- windows - 在带有巧克力的 Windows 10 Pro 上安装软件包时出现问题,我无法在我的 PC 上的任何地方找到已安装的软件包
- android - 如何使用 ScrollView 和 Linear Layout 仅使部分布局可滚动?
- javascript - 如何删除JS数组中的下一个相等元素
- mysql - MySQL 自连接优化,同时计算移动平均值