Question

Thanks for looking at this question in advance.

I’m using jQuery drag and drop for a project I’m doing at university and I’m looking to count each drop and change the class that is added on each drop.

Here is the jQuery:

$('#droppableChoking').droppable({
    drop: function (event, ui) {
        //reuse jQuery object
        var $this = $(this);

        //get object type
        var droppedObject = ui.draggable.data('object');

        //css reset
        $this.removeClass();
        $this.addClass("grape" + droppedObject);
        }

        //play drop sound
        audioClap.play();
    }
});

I’ve tried doing a loop and add the value of the count to the class to change it each time but I’m doing something wrong!

Answer 1

http://api.jquery.com/removeClass/ removeClass requires One or more space-separated classes to be removed from the class attribute of each matched element.

So with that in mind, your call to removeClass isn’t likely removing anything. If you want to clear out the class, then do $this.attr('class', '')

As for a counter, here is my updated JS:

    var counter = 0;

    $('#droppableChoking').droppable({
            drop: function (event, ui) {
                ++counter;

                //reuse jQuery object
                var $this = $(this);
                //get object type
                var droppedObject = ui.draggable.data('object');
                //css reset
                $this.attr('class', '');
                $this.addClass("grape" + droppedObject);

                // what to do with counter?  not sure.  Whatever you want.  I'm setting text.  Not sure how you want to use it for the class.
                $this.text(counter);
                }
                //play drop sound
                audioClap.play();
            }
        });