0

我有一个 html DIV 如下

<div id="mapimage" style="background-image: url('images/physical-map.jpg'); width: 500; height: 548; background-repeat: no-repeat"></div>

要在此 DIV 背景图像上添加标记，我正在执行以下操作。

$(document).ready(function () {
    $('div#mapimage').mousedown(function (e) {
         e.preventDefault();
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                var img = $('<img>');
                img.css('top', y);
                img.css('left', x);
                img.attr('src', 'images/red-dot.png');
                img.appendTo('#mapimage');
    });

这工作正常，我需要的是 - 第一次，我将在 DIV 的位置 (10,122) 添加一个标记。如果我第二次点击相同的位置，添加的标记应该从那里删除。这个怎么做？

4

1 回答 1

1

每次单击地图图像时，向 中添加一个类img并删除该类。

$(document).ready(function () {
    $('div#mapimage').mousedown(function (e) {
        e.preventDefault();

        // remove all images
        $('.remove-me').remove();

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.attr('src', 'images/red-dot.png');

        // add a class to the image
        img.addClass('remove-me');

        img.appendTo('#mapimage');
    });
});

或者

无需在每次单击地图时删除所有图像，只需删除单击的图像即可。

$(document).ready(function () {
    // remove images that are clicked
    $('.remove-me').on('click', function(){
        $(this).remove();
    });

    $('div#mapimage').mousedown(function (e) {
        e.preventDefault();
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.attr('src', 'images/red-dot.png');

        // add a class to the image
        img.addClass('remove-me');

        img.appendTo('#mapimage');
    });
});
于 2012-04-28T06:07:59.017 回答