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) にマークを追加することです。そして、2回目に同じ位置をクリックすると、追加されたマークがそこから削除されます。これを行う方法？

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 に答える