Question

我有一个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）添加一个标记。如果我第二次点击相同的位置，应该从那里删除添加的标记。怎么做？

Answer 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');
    });
});

使用Jquery在图像上添加或删除标记

1 个答案: