I have a bunch of elements like the following:
<div class="droppableP" id="s-NSW" style="width:78px; height:63px; position: absolute; top: 223px; left: 532px;">
</div>
They all have class droppableP but different id's obviously and I would like to factor the code in this script I am hacking on. The original script just has a specific selector for each of one of these divs, but the code is all alike except for the id it does things to, which is either the id of the parent or another div with a name that's related to it. Here is the original code specifically for this div:
$("#s-NSW > .sensible").droppable( {
accept : "#i-NSW",
tolerance : 'intersect',
activeClass : 'droppable-active',
hoverClass : 'droppable-hover',
drop : function() {
$('#s-NSW').addClass('s-NSW');
$('#s-NSW').addClass('encastrada'); //can't move any more..
$('#i-NSW').remove();
$('#s-NSW').animate( {
opacity: 0.25
},200, 'linear');
checkWin();
}
});
Here is how I would like to factor so the same code can do all of them and I will eventually do chaining as well and maybe get rid of the inline styles but here is my first go:
$(".droppableP > .sensible").droppable( {
accept : "#i" + $(this).parent().attr('id').substring(2),
tolerance : 'intersect',
activeClass : 'droppable-active',
hoverClass : 'droppable-hover',
drop : function() {
$(this).parent().addClass($(this).parent().attr('id'));
$(this).parent().addClass('encastrada');
$("#i" + ($this).parent().attr('id').substring(2)).remove();
$(this).parent().animate( {
opacity: 0.25
},200, 'linear');
checkWin();
}
});
The error I get is $(this).parent().attr("id") is undefined
Many thanks. I have browsed related questions the one I understand that's closest to mine, turns out they didn't need parent function at all. I'm kind of a noob so please don't yell at me too hard if this is a stupid question.
