Question

我已经创建了这个小光标跟踪应用程序，并且有一个我无法弄清楚的小错误。当您选择设置并单击“开始”时，它会向DOM添加一个div，并且工作正常。但是，如果您随后更改了设置，请点击“开始”按钮。再次，它添加了另一个这些div而不删除第一个。因此，您最终得到两个（或更多）彩色/大小的光标轨迹。如何在单击go时删除现有的跟踪并添加新的跟踪？

jsFiddle这里：http://jsfiddle.net/hh40ydky/

$(document).ready(function () {

$('.go').click(function () {

    var color = $('.pointcolor').val();
    var size = $('.pointsize').val();
    var speed = parseInt($('.speed').val(), 10);

    $('.mousearea').mousemove(function (e) {

        var pointer = $('<div id="pointer">').css({
            'width': size,
            'height': size,
            'background-color': color,
            'border-radius':'100%'
        });


        $(document.body).append(pointer);

        pointer.css({
            'position': 'absolute',
            top: e.pageY + 10,
            left: e.pageX + 10
        }).fadeOut(speed);

    });
  });
});

谢谢！

Answer 1

你有一些问题：

您正在使用相同的id创建多个元素，这会导致文档无效。好消息是你没有理由将指针元素赋予id（只需删除它）。
主要问题是，每次点击时，click处理程序都会创建新 mousemove处理程序。所以第二次，你有两个处理程序，每个处理程序管理一组指针。第三次，你有三个等等。

您可能只想附加一次mousemove事件，外部您的点击处理程序，而是使用一个标志来判断是否启用了跟踪。

或者，我不推荐它，您可以使用事件名称空间并在附加新处理程序之前删除旧处理程序。
您永远不会删除指针元素。 fadeOut会使它们不可见，但不会删除它们。添加一个回调到fadeOut以在元素淡出时删除该元素。
最后，我可能会在指针元素中添加一个类，以便在用户再次单击Go时可以删除任何存在的东西，但这是一个很好的（因为它们会删除）无论如何）。

Updated Fiddle - 在此，我使用color作为我的旗帜（因为一旦你点击Go至少一次，它将是一个非空字符串）：

$(document).ready(function () {
    var color; // Using this as the flag for #2
    var size;
    var speed;

    $('.go').click(function () {

        color = $('.pointcolor').val();
        size = $('.pointsize').val();
        speed = parseInt($('.speed').val(), 10);

        $(".pointer").remove(); // #4
    });

    // Moved this out of `click` for #2
    $('.mousearea').mousemove(function (e) {
        if (!color) {
            return;
        }

        var pointer = $('<div class="pointer">').css({ // #1, #4
            'width': size,
            'height': size,
            'background-color': color,
            'border-radius':'100%'
        });

        $(document.body).append(pointer);

        pointer.css({
            'position': 'absolute',
            top: e.pageY + 10,
            left: e.pageX + 10
        }).fadeOut(speed, removeWhenDone); // #3
    });

    function removeWhenDone() {            // #3
        $(this).remove();
    }
});

删除/重置添加到DOM的元素

1 个答案: