jQuery Drag and Drop issue - div id and class dependent

Question

I have two draggable images, 1 man and 1 woman. When I drag the man into one of two divs I want to hide the image that is there and show a new specific image. When I drag the woman into that same div I want to hide the existing image and to show a separate different image.

There are two separate divs of the above example. Two draggable images into two separate divs. The incoming image will determine what hides and what shows. I have my code so far below. It's not working. I know the && is out of place.

    $('#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

Answer 1

Fixed the syntax errors in the 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/

EDIT

I have added a closing to the parantheses for the conditions at the if and else if parts. Also, instead of comparing a nonexistent class variable .hasClass() is being called.

EDIT2

Simplified 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();
    }
  }
});

EDIT3

In the new fiddle: https://jsfiddle.net/1btx6rfp/

We can see the solution:

$('#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();
    }
  }
});

We have a simplified if and the drop event is handled correctly.