jquery - 每次删除项目时添加类？

Question

感谢您提前查看此问题。

我正在为我在大学做的一个项目使用 jQuery 拖放，我希望计算每个 drop 并更改每个 drop 上添加的类。

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

我试过做一个循环并将计数的值添加到类中以每次更改它，但我做错了！

Answer 1

尝试这样的事情：

var drop_count = 0;

$('#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_" + drop_count);
        drop_count++;

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

Answer 2

http://api.jquery.com/removeClass/ removeClass要求从每个匹配元素的类属性中删除一个或多个空格分隔的类。

因此，考虑到这一点，您对 removeClass 的调用不太可能删除任何内容。如果您想清除课程，请执行$this.attr('class', '')

至于计数器，这是我更新的 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();
            }
        });